Color Contrast Checker
Check any text and background color pair against WCAG 2.2 AA and AAA. Get the exact contrast ratio, pass/fail for normal text, large text and UI components, and a shareable link. Free and private: everything runs in your browser.
Preset pairs
Live preview
Large heading text (24px bold)
Normal body text at 16px. The quick brown fox jumps over the lazy dog. Good contrast keeps paragraphs readable for people with low vision, color blindness, or a phone in bright sunlight.
Small print at 14px — fine print still needs to meet the normal-text threshold.
How the contrast ratio is calculated
WCAG defines contrast using relative luminance, how bright a color appears to the human eye on a scale from 0 (black) to 1 (white). For each color, ContrastCheck:
- Splits the hex value into red, green and blue channels and divides each by 255.
- Linearizes each channel: values ≤ 0.04045 are divided by 12.92; otherwise
((c + 0.055) / 1.055)^2.4. - Weights them by how sensitive our eyes are to each:
L = 0.2126·R + 0.7152·G + 0.0722·B.
The contrast ratio is then (L_lighter + 0.05) / (L_darker + 0.05), which ranges from 1:1 for identical colors to 21:1 for black on white. The result is compared to the thresholds without rounding: 4.5:1 (AA) and 7:1 (AAA) for normal text, 3:1 (AA) and 4.5:1 (AAA) for large text, and 3:1 for UI components and graphics.
Not sure which level to target? Read WCAG AA vs AAA contrast: which should you use?
Color contrast checker FAQ
›What is a good color contrast ratio?
WCAG 2.2 Level AA requires at least 4.5:1 for normal body text and 3:1 for large text. Level AAA raises that to 7:1 for normal text and 4.5:1 for large text. Ratios range from 1:1 (identical colors) to 21:1 (black on white).
›What counts as large text in WCAG?
Large text is at least 18 point (about 24 CSS px) at regular weight, or at least 14 point (about 18.66 CSS px) when bold. Large text has lower contrast thresholds because bigger glyphs are easier to read.
›What is the 3:1 UI component and graphics requirement?
WCAG success criterion 1.4.11 Non-text Contrast requires a 3:1 ratio for the visual boundaries of interactive controls (input borders, focus rings, toggle states) and for graphical objects such as icons and chart lines needed to understand content.
›Does the order of foreground and background matter?
No. The WCAG formula always divides the lighter color's luminance by the darker one's, so swapping foreground and background gives the same ratio. The preview changes, but the numbers and pass/fail results do not.
›Is my data uploaded anywhere?
No. This color contrast checker runs entirely in your browser. The only place your colors are stored is the page URL (?fg=…&bg=…), which lets you bookmark or share a specific pair.
›Why does 4.49:1 fail when it is so close to 4.5:1?
WCAG thresholds are hard minimums and are not rounded. ContrastCheck compares the exact ratio and truncates the displayed value, so a pair that shows 4.49:1 fails AA for normal text. Use the suggested color to nudge it over the line.
›Does this checker support APCA or WCAG 3?
Not yet. ContrastCheck uses the WCAG 2.x contrast ratio, which is what current laws and procurement standards (ADA guidance, Section 508, EN 301 549 / European Accessibility Act) reference today.