Contrast Checker
Verify WCAG color contrast ratios for accessibility compliance.
About the Contrast Checker
This contrast checker evaluates the legibility of a text-and-background color pair against the WCAG 2.1 Web Content Accessibility Guidelines published by the W3C. Enter a foreground (text) color and a background color in HEX format and the tool reports the contrast ratio along with pass/fail status for normal text at AA and AAA levels, large text at AA and AAA levels, and non-text UI components such as icons and form-field borders.
WCAG 2.1 Level AA requires a 4.5:1 contrast ratio for normal text (below 18pt regular or 14pt bold) and 3:1 for large text. The stricter AAA level requires 7:1 for normal text and 4.5:1 for large text. User-interface components and graphical objects (checkbox borders, focus indicators, chart data points) need 3:1 against adjacent colors. These thresholds come from research on visual impairments including low vision, color blindness, and age-related contrast sensitivity loss.
The math uses the WCAG relative luminance formula with proper sRGB gamma decoding. Each color's luminance is computed by linearizing the sRGB channel values and combining them with the Rec. 709 coefficients (0.2126 for red, 0.7152 for green, 0.0722 for blue) that reflect the eye's sensitivity to different wavelengths. The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter and L2 is the darker luminance.
How It Works
The checker parses each HEX color into its red, green, and blue channel values, then linearizes each channel using the sRGB inverse gamma function: c ≤ 0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4. This step is critical — without it the perceived-brightness calculation would be wildly off because sRGB encodes luminance nonlinearly to match CRT display characteristics.
The relative luminance is then computed as L = 0.2126*R + 0.7152*G + 0.0722*B using the linearized channel values. The coefficients come from the ITU-R BT.709 standard for HDTV and reflect the fact that the human eye is roughly twice as sensitive to green as to red, and about ten times more sensitive to green than to blue.
The contrast ratio itself is (Llighter + 0.05) / (Ldarker + 0.05). The +0.05 term represents ambient flare — a small constant that prevents infinite ratios when one of the colors is pure black (luminance 0). With this term, pure black on pure white yields exactly 21:1, which is the maximum achievable contrast on a screen.
The pass/fail checks are simple threshold comparisons. Normal text needs 4.5:1 (AA) or 7:1 (AAA). Large text — at least 18pt (24px) regular or 14pt (18.66px) bold — needs 3:1 (AA) or 4.5:1 (AAA) because larger glyph area compensates for lower contrast. Non-text UI components need 3:1 against adjacent colors under WCAG 2.1 Success Criterion 1.4.11.
Worked Examples
The default values use a cream foreground #FAF7F0 on a forest-green background #0A4F3A. The linearized luminances are roughly 0.97 for the cream and 0.06 for the green, giving a contrast ratio of about (0.97+0.05)/(0.06+0.05) = 9.27:1 — well above the AAA threshold for both normal and large text. The sample swatch shows the colors rendered with three text sizes plus a button, so you can verify the result visually.
Now try a common mistake: light gray text #999999 on white #FFFFFF. The ratio works out to about 2.85:1, which fails even AA for normal text. Many websites use this combination for ‘muted’ secondary text and end up failing WCAG audits. Darkening the gray to #767676 raises the ratio to 4.54:1 and passes AA.
For a vivid design example, try #FF6B35 orange on #003F5C navy. The ratio is around 4.7:1, which passes AA for normal text and AAA for large text — a great high-energy combination that doesn't sacrifice accessibility. Compare with #FF6B35 on white at about 3.0:1, which fails for normal text but passes for large text and UI components only.
When to Use This Tool
- Auditing an existing website's color palette before a WCAG 2.1 AA compliance review or ADA lawsuit defense.
- Choosing text and background colors for a new design system that pass AAA out of the box.
- Verifying that focus indicators (3:1 minimum) are visible against both their background and the focused element's own background.
- Debugging why a design looks great to the designer but unreadable to a low-vision user — usually a 3-4:1 ratio masquerading as ‘high enough’.
- Comparing button color candidates before committing to a design system, ensuring all variants meet the 3:1 UI component threshold.
- Evaluating data visualization palettes: chart legends, axis labels, and gridlines all need to meet minimum contrast.
- Confirming that a brand's signature color works on a white background before sending brand guidelines to print or web.
Limitations & Disclaimer
This checker evaluates two solid colors only. It does not model text over images, gradients, or semi-transparent overlays — for those you must compute the worst-case effective background color manually. The luminance formula uses the sRGB transfer function and Rec. 709 coefficients and may not match results from tools using older gamma approximations (e.g., the deprecated 0.299R + 0.587G + 0.114B). Automated contrast checking does not replace manual review of perceived legibility, which depends on font weight, size, anti-aliasing, and viewing context. WCAG 2.1 is the current standard; WCAG 3.0 (in draft) uses a different perceptual-contrast model called APCA that may produce different pass/fail results. See our disclaimer for full terms.
Frequently Asked Questions
What does WCAG AA actually require?
WCAG 2.1 Level AA requires a 4.5:1 contrast ratio for normal text (below 18pt regular or 14pt bold) and 3:1 for large text. WCAG Level AAA — a stricter, optional tier — requires 7:1 for normal text and 4.5:1 for large text. AA is the legal minimum in most accessibility regulations (ADA, EAA, Section 508).
Why does the tool add 0.05 to both luminances?
The +0.05 term accounts for ambient flare — the small amount of light that bounces around a typical screen and prevents deep blacks from being truly black. Without it, pure black on pure white would compute to infinity. With it, the maximum ratio is 21:1, which is the theoretical max for screen display.
Does this checker handle text over images or gradients?
No. The WCAG contrast formula assumes flat, solid colors. Text over a photo, gradient, or texture needs the worst-case contrast ratio across the entire text area. For images you typically need to add a solid-color overlay (e.g., a semi-transparent black scrim) to guarantee minimum contrast.
Does color blindness affect contrast ratios?
The WCAG luminance formula accounts for most forms of color blindness because it weights channels by typical visual sensitivity. However, protanopia (red-blind) users see lower red-channel contrast, and deuteranopia (green-blind) users see lower green-channel contrast. Don't rely on color alone to convey meaning — always pair color with shape, text, or pattern.
Why does my design look accessible but still fail?
Perceived contrast depends on font weight, size, anti-aliasing, and viewing distance. A thin 12px font may feel readable at 4.5:1 but fail in practice because the strokes are too narrow. WCAG treats size and weight separately (large text = 18pt+ regular or 14pt+ bold), but real designs need extra margin. Aim for 5:1 or higher on body text.
Do focus rings need to meet contrast?
Yes — WCAG 2.1 SC 1.4.11 requires non-text UI components including focus indicators to meet 3:1 contrast against adjacent colors. A 2px blue focus ring on a light-gray button background can easily fail if the blue is too light. Many design systems now use a high-contrast 3px outline-offset ring to guarantee compliance.
Last updated: July 21, 2026 · Author: HT99 Tools Editorial Team · Reviewed by: HT99 Tools Editorial Team