WCAG 2.2 Color Contrast Checker
Enter foreground and background hex colors to calculate their ratio and check WCAG 2.2 AA and AAA thresholds for normal and large text.
Built and maintained by Maaz Rana. Updated .
Loading Color Contrast Checker...
What This Contrast Result Covers
Use the ratio for one solid sRGB color pair, then test the interface around it
Normal Text at Level AA
WCAG 2.2 requires at least 4.5:1 for text below the large-text threshold. The value is a hard threshold, so compare the unrounded ratio.
Large Text and Necessary UI Cues
Large text uses a 3:1 minimum at Level AA. Necessary outlines, icons, states, and meaningful graphics have a separate 3:1 non-text requirement.
Not a Full Accessibility Audit
This checker compares two solid sRGB colors. It cannot inspect gradients, images, component states, typography, keyboard use, or page semantics.
Thresholds and exceptions follow W3C guidance for text contrast, enhanced contrast, and non-text contrast. Color used to convey meaning is covered separately by Use of Color. WCAG 3 remains a W3C Working Draft.
Understanding WCAG Standards
The text thresholds shown in the result cards
WCAG Level AA
Minimum Text Contrast
Success Criterion 1.4.3 sets these minimums for text and images of text. Placeholder, hover, and focus text are included; inactive controls and logotypes are exceptions.
WCAG Level AAA
Enhanced Text Contrast
Success Criterion 1.4.6 raises the text thresholds. It is an enhanced target, not evidence that the rest of a page or product meets Level AAA.
How Color Contrast Works
The current sRGB calculation and the limits of a two-color check
1. Convert sRGB to Relative Luminance
Each 8-bit color channel is normalized and linearized using the current 0.04045 breakpoint. The red, green, and blue results are then weighted.
L = 0.2126 × R + 0.7152 × G + 0.0722 × B2. Compare the Lighter and Darker Colors
The ratio runs from 1:1 for identical luminance to 21:1 for black and white. Foreground and background order does not change the WCAG 2.2 result.
(L1 + 0.05) / (L2 + 0.05)3. Compare the Unrounded Ratio
The pass or fail check uses the full calculated value before the displayed ratio is rounded. Then it applies the selected text-size and conformance threshold.
Best Practices for Accessible Color Contrast
Where to test the same pair before a design ships
Test the Adjacent Colors
Check the foreground against the color directly behind it. For a gradient or image, test the least contrasting area the text can cross.
Do Not Rely on Color Alone
Pair status colors, selected states, charts, and validation messages with text, shapes, patterns, or another visible cue.
Check Every Active State
Measure default, hover, focus, selected, pressed, and error states against their adjacent colors. Inactive controls have specific exceptions.
Use the Rendered Size and Weight
Only treat text as large at 18pt (24 CSS px) regular or 14pt (about 18.67 CSS px) bold. Smaller text uses the normal-text threshold.
Document Token Pairings
Record approved foreground/background pairs and their intended roles. A color token does not pass or fail until it is paired with another color.
Review the Finished Interface
Recheck implementation after font rendering, overlays, opacity, and state styles are applied. A design-file value can change in production.
Common Contrast Mistakes to Avoid
Four places where a single token-level check can mislead you
Trusting a Neutral Pair by Eye
#777777 on #F5F5F5 looks plausible but measures about 4.11:1. It passes the large-text minimum and fails Level AA for normal text.
Sampling One Spot on an Image
A photo or gradient can put several backgrounds behind one line of text. Test the least contrasting area or use a solid overlay with a known result.
Checking Body Text as Large Text
A 16px label or paragraph is normal text, even when it appears prominent in a compact interface. It needs 4.5:1 for Level AA.
Applying the Inactive Exception Too Widely
Truly inactive controls are exempt from these contrast criteria. Placeholder text, hover text, focus text, and active control indicators are not.
Color Contrast FAQs
Current WCAG 2.2 thresholds, exceptions, and testing boundaries
WCAG 2.2 Level AA requires at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. Treat those numbers as hard thresholds: a calculated 4.499:1 does not pass 4.5:1, even if a display rounds it up.
Large text is at least 18pt (24 CSS px) at regular weight or 14pt (about 18.67 CSS px) when bold. Anything smaller uses the normal-text threshold. W3C also notes that thin or unusual fonts can render with less apparent contrast, so passing the mathematical threshold is not a reason to skip a visual review.
They are treated differently. Text in an inactive user-interface component and text that is part of a logo or brand name are exceptions under Success Criterion 1.4.3. Placeholder text is not exempt: W3C explicitly includes it, along with text shown on hover or keyboard focus. Test placeholder text against the input background using the normal- or large-text threshold that applies to its rendered size.
WCAG 2.2 has a separate Level AA criterion for non-text contrast. Visual information needed to identify an active control or its state, plus parts of graphics needed to understand the content, must reach 3:1 against adjacent colors. This tool can calculate that ratio, but its result cards label the text thresholds; you still need to decide which boundaries, icons, states, or graphic parts are necessary.
No. A contrast ratio compares relative luminance; it does not prove that people can distinguish the hues or understand information encoded only by color. Success Criterion 1.4.1 requires another visual way to convey meaning when color carries information. Add a text label, shape, pattern, underline, or other visible cue where the distinction matters.
No. WCAG 2.2 uses the same ratio and thresholds for light-on-dark and dark-on-light pairs. Test the colors that actually render in each theme, including text, placeholders, focus indicators, selected states, icons, and any semi-transparent overlays.
WCAG 3.0 is still a W3C Working Draft, and publication as a draft does not make it a W3C Recommendation. This checker deliberately uses the relative-luminance formula and thresholds in the current WCAG 2.2 Recommendation. If your project evaluates another contrast model, report it separately rather than presenting the two scores as interchangeable.
Need the Whole Interface Reviewed?
Share the product, design file, or component library. Design Overflow can scope the design and implementation work around states, tokens, and the rendered interface.
Discuss the Interface