WCAG Color Contrast Checker - AA/AAA Text and UI

Image and screenshot sampling

Shareable results

Batch checker

Paste one pair per line. Examples: #111,#fff, text: #1a1a1a; background: #ffffff, or --text #222 --surface #f8fafc.

How the contrast ratio is calculated

WCAG contrast compares the relative luminance of the lighter and darker colors:

For sRGB colors, each channel is linearized first, then luminance is calculated as 0.2126 R + 0.7152 G + 0.0722 B. The result ranges from 1:1 for identical colors to 21:1 for black on white.

Thresholds used here: AA normal text 4.5:1, AA large text and non-text UI components 3:1, AAA normal text 7:1, and AAA large text 4.5:1. Transparent foreground colors are blended over the background before testing.

Standards note: the calculation follows the W3C relative luminance and contrast ratio definitions used by WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced), and 1.4.11 Non-text Contrast. This tool runs locally and is not a full accessibility audit.

How to use this checker

1. Enter the text color in the foreground field or use the picker.
2. Enter the page, card, or button background color.
3. Check the AA and AAA rows for normal text, large text, and UI components.
4. Use swap when you want to compare the reverse pairing.
5. Copy the report or download a CSV row for an accessibility note or review ticket.

WCAG large text means at least 18 point regular text, or at least 14 point bold text. Contrast is only one part of accessible design; spacing, focus states, text size, font weight, and state changes also matter.

Practical contrast guidance

Start by testing the exact colors that users will see, not just the design token names. A foreground token may be used on several surfaces, and each surface can change the final ratio. Cards, alerts, disabled controls, hover states, focus outlines, selected tabs, chart labels, and placeholder text often use softer colors than the main body copy, so they deserve their own checks before release.

Treat the AA and AAA results as thresholds, not as the whole design review. A pair that barely passes can still be tiring when the font is thin, the text is small, or the screen is viewed in bright light. When possible, leave some margin above the minimum. This gives the interface more room for antialiasing, user zoom, display calibration differences, and small color changes that happen as a design system evolves.

Opacity is easy to miss. Semi-transparent text, overlays, tinted cards, and gradients can all change the real foreground and background colors. For gradient or image backgrounds, sample the lightest and darkest areas where the text can appear. If a color pair only works in one part of the image, add a solid backing, change the text color, or constrain where the text is allowed to sit.

FAQ

What is color contrast?

Color contrast is the measured luminance difference between a foreground color and the color behind it. WCAG expresses it as a ratio from 1:1 to 21:1.

Why does contrast matter?

Readable contrast helps people with low vision, color vision deficiencies, glare, older displays, or temporary viewing limits understand text and controls.

What contrast ratio is good?

For most body text, aim for at least 4.5:1. For stronger accessibility margins, use 7:1 where the visual design allows it.

How do I fix a Lighthouse contrast error?

Copy the failing foreground and background colors from DevTools, test them here, then darken or lighten the foreground until the relevant AA row passes. Retest the exact component state that Lighthouse reported.

Can a color pair pass AA but fail AAA?

Yes. A ratio such as 5.2:1 passes AA normal text but fails AAA normal text because AAA requires 7:1.

What is the difference between WCAG AA and AAA?

AA is the common legal and product baseline. AAA is stricter and may not be practical for every brand color or large visual treatment, but it is useful for critical reading surfaces.

Did WCAG 2.2 change the contrast math from WCAG 2.1?

No. WCAG 2.2 keeps the same contrast ratio formula and thresholds used for these checks.

Why does large text have a lower threshold?

Large text is easier to read at lower contrast, so WCAG sets lower minimums for large or bold text.

Does opacity affect contrast?

Yes. A semi-transparent foreground color is blended with the background before contrast is calculated, which often lowers the final contrast.

Can I use this for icons and form controls?

Use the AA UI / graphics result for meaningful icons, chart marks, focus outlines, input borders, and other non-text elements that need a 3:1 contrast check.

What about links identified by color alone?

If a link is only distinguished by color, the link color should have at least 3:1 contrast against the surrounding body text and should still meet text contrast against the page background.

How should I test gradients and image backgrounds?

Sample the lightest and darkest areas behind the text. If either position fails, add a solid overlay, constrain the text placement, or choose a more robust foreground color.

Do disabled controls need to meet contrast?

WCAG generally exempts inactive controls, but very faint disabled states can still confuse users. Keep labels, explanations, and available actions readable.

Does this account for color blindness?

Contrast helps many users, including some people with color vision deficiencies, but do not rely on color alone to communicate meaning. Use text, icons, patterns, or state labels too.

Does passing contrast guarantee accessibility?

No. Contrast is one measurable requirement. Full accessibility also depends on semantic HTML, keyboard support, focus visibility, readable language, sizing, spacing, and assistive technology behavior.

Common contrast mistakes