Home › Color Tools › Color Contrast Checker
Color Contrast Checker
Check whether your foreground and background color pair meets WCAG 2.1 accessibility contrast requirements. Instantly see your contrast ratio with clear AA and AAA pass/fail results.
✓ Free✓ No signup✓ Privacy first✓ Runs in your browser
Color Contrast Checker · WCAG 2.1 compliance check · Live preview · client-side only
How it works
Check your contrast ratio in three steps
Enter your two colors
Input HEX or RGB values for your foreground (text) color and your background color. A live text preview updates to show how the combination looks at real scale.
View the contrast ratio
The tool calculates the WCAG contrast ratio between the two colors using the relative luminance formula defined in the WCAG 2.1 specification.
Check your compliance level
Results display clear PASS or FAIL indicators for WCAG Level AA (minimum standard) and Level AAA (enhanced standard) at both normal text and large text sizes.
FAQ
Common questions about contrast checking
What is WCAG and why does contrast ratio matter?
WCAG stands for Web Content Accessibility Guidelines, published by the World Wide Web Consortium (W3C). Contrast ratio requirements exist to ensure text is readable by people with low vision, colour vision deficiency, or those viewing screens in bright environments. Under WCAG 2.1, the minimum contrast ratio for normal body text is 4.5:1 at Level AA, and 7:1 at Level AAA (enhanced). Large text u2014 defined as 18pt or larger, or 14pt bold and larger u2014 has a lower threshold of 3:1 for AA compliance.
What is the difference between AA and AAA compliance?
WCAG Level AA is the standard required by most accessibility legislation worldwide, including the ADA (United States), EN 301 549 (European Union), and the Equality Act (United Kingdom). Level AAA requires a more stringent contrast ratio of 7:1 for normal text and 4.5:1 for large text, and it is recommended where the design permits u2014 particularly for interfaces serving older adults or people with significant visual impairment. AAA is not mandated in most legal frameworks but represents best practice for high-stakes or high-accessibility contexts.
What contrast ratio should I target?
For most web and app interfaces, aim for at least 4.5:1 for body text and interactive UI controls, and at least 3:1 for large headings and graphical elements. If your audience is likely to include older users, people with visual impairments, or anyone accessing your interface outdoors on a mobile screen, higher ratios meaningfully improve the experience. Pure black on white achieves 21:1. Low-contrast combinations below 3:1 create documented readability problems for a significant portion of users regardless of intent.
Does this tool check contrast for images and icons?
This tool checks contrast between two flat colors and is intended for text-on-background pairs and UI control elements. It does not analyse photographic images or complex gradient backgrounds. For icons and informational graphical elements, WCAG 1.4.11 (Non-text Contrast) requires a minimum 3:1 ratio against adjacent colors. When placing text over images or gradients, test contrast at the least-contrasting region of the background to ensure text is readable across the full range of background values that may appear behind it.
Keep going
Related tools
Color Palette Generator
Generate palettes and validate each color pair here for accessibility.
Color Picker
Select exact foreground and background colors before running a contrast check.
Color Blindness Simulator
Preview your color pairs under different types of color vision deficiency.
HEX to RGB Converter
Convert your color codes into the format needed for contrast checking.
About the Color Contrast Checker
The Color Contrast Checker validates color pairs against the WCAG 2.1 accessibility standard, providing instant pass/fail results at all four compliance categories: AA normal text, AA large text, AAA normal text, and AAA large text. It is used by web developers, UX designers, and accessibility specialists building interfaces that must meet legal or organisational accessibility requirements. Running a contrast check during the design phase is far less costly than remediating low-contrast choices after development.
Benefits
-
Checks all four WCAG 2.1 compliance levels simultaneously in a single tool -
Displays the exact numerical contrast ratio so designers understand proximity to each threshold -
Live text preview shows how the color combination looks before committing to it -
Instant browser-based results with no file uploads, no data collection, and no account required
Privacy
Color values entered into this tool are processed entirely within your browser; no inputs or results are transmitted to any server or stored in any form.