Color Contrast Checker
Check WCAG 2.2 contrast ratios for text and background colors. Instant AA/AAA pass/fail feedback.
Colors
Preview
The quick brown fox
Normal text sample (16px)
Small text sample (12px)
Results
15.71:1
Contrast Ratio
WCAG AA — Normal text
Minimum 4.5:1
WCAG AA — Large text
Minimum 3:1 (18px+ or 14px+ bold)
WCAG AAA — Normal text
Enhanced 7:1
WCAG AAA — Large text
Enhanced 4.5:1
How to Use the Contrast Checker
The checker works on any foreground/background color pair and gives you an instant WCAG verdict. Follow these steps to get accurate results:
- Type or paste a hex color code (e.g.,
#1a1a1a) into the Foreground field, or click the color swatch to open the native color picker. - Do the same for the Background field. Both fields accept 3- or 6-character hex codes with or without the leading
#. - The contrast ratio and four WCAG pass/fail badges (AA Normal, AA Large, AAA Normal, AAA Large) update in real time as you type — no button needed.
- Check the live preview panel to see how your text actually looks against that background at different font sizes.
- If the pair fails AA for normal text, the tool surfaces a suggested foreground color that achieves at least 4.5:1 by nudging the brightness of your original color. Click Apply to swap it in without retyping.
- Use the Swap Colors button to flip foreground and background instantly — useful when you want to check both light-on-dark and dark-on-light variations of the same palette.
- Once you have a passing pair, copy the hex codes into your design file or CSS and you are done.
How Contrast Ratio Is Calculated
WCAG contrast ratio is not a simple brightness difference. It is based on relative luminance — a perceptual measure of how much light a color emits relative to white, calculated according to the sRGB color space used by every modern screen.
For each color channel (red, green, blue) the raw 0–255 value is first divided by 255 to bring it into the 0–1 range. Values at or below 0.03928 are divided by 12.92 to handle the linear segment of the sRGB curve. Values above that threshold follow the power formula ((c + 0.055) / 1.055) ^ 2.4. The three linearized channels are then combined with perceptual weights that reflect how human vision responds to each wavelength:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
The green channel carries the heaviest weight (71.52%) because the human eye is most sensitive to green light. Red contributes about 21%, and blue only 7%. This is why a bright green and a bright blue of the same “brightness” in a color picker can have very different luminance values.
Once you have the relative luminance of both colors — call them L1 (lighter) and L2 (darker) — the ratio is:
Ratio = (L1 + 0.05) ÷ (L2 + 0.05)
The 0.05 offset on both sides is a WCAG-specified constant that prevents division by zero when comparing against true black (L = 0) and anchors the scale so that black on white produces the theoretical maximum of 21:1. When both colors are identical the ratio is 1:1 — no contrast at all. The full scale runs from 1:1 to 21:1, and WCAG thresholds sit at specific points along that range.
This checker performs those calculations entirely in your browser using the exact formula above, so there is no server round-trip and no color data ever leaves your device.
WCAG Thresholds
WCAG 2.x defines two conformance levels for contrast: AA (the widely adopted legal standard) and AAA (the enhanced tier). Each level sets a different minimum ratio depending on what you are contrasting.
| Content type | WCAG AA minimum | WCAG AAA minimum |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (18pt+ or 14pt+ bold) | 3:1 | 4.5:1 |
| UI components & informational graphics | 3:1 | Not defined |
WCAG defines “large text” as text that is at least 18 point (24 CSS pixels) at normal weight, or at least 14 point (approximately 18.67 CSS pixels) when bold. The distinction matters because larger letterforms are easier to recognize even when the contrast is lower, so WCAG relaxes the threshold. Note that the measurement is about the rendered size, not the font-size value in your source CSS — if you apply a transform scale or use viewport units, the physically rendered size is what counts.
The UI components threshold (criterion 1.4.11, Non-text Contrast) covers the visual boundaries of interactive elements such as button borders, checkbox outlines, focus rings, and input field edges, as well as any part of an icon or chart that conveys information. Purely decorative graphics and disabled components are exempt from the 3:1 requirement.
A Worked Example
Take the classic “is this gray accessible?” question. The hex color #767676 on a white (#FFFFFF) background is a common design choice, but let's check the math.
White has a relative luminance of 1.0 (the maximum). For #767676, each channel is 118 in decimal. After sRGB linearization that channel becomes approximately 0.2158, and weighting all three equal channels gives a luminance of roughly 0.2157. Plugging into the formula:
(1.0 + 0.05) ÷ (0.2157 + 0.05) ≈ 4.54:1
A ratio of 4.54:1 clears the 4.5:1 AA threshold for normal text — but only just. It fails the 7:1 AAA threshold. This is why #767676 is widely cited as the “minimum AA gray” on white. Any lighter gray will fail AA entirely.
| Foreground | Background | Ratio | AA Normal | AAA Normal |
|---|---|---|---|---|
| #767676 | #FFFFFF | 4.54:1 | Pass | Fail |
| #595959 | #FFFFFF | 7.00:1 | Pass | Pass |
| #AAAAAA | #FFFFFF | 2.32:1 | Fail | Fail |
| #000000 | #FFFFFF | 21.00:1 | Pass | Pass |
The light gray #AAAAAA is a common mistake — it looks readable on screen but produces only 2.32:1, failing AA by a wide margin. Dropping just to #595959 hits the full AAA threshold without needing true black.
Frequently Asked Questions
What is a good contrast ratio to aim for?
For body text, aim for at least 4.5:1 to satisfy WCAG AA — this is the widely enforced legal standard in the EU, UK, Canada, and for US federal websites under Section 508. If your design allows it, targeting 7:1 (AAA) gives even more headroom and benefits users with more severe low vision. For large headings and bold callouts, 3:1 is the legal minimum, though 4.5:1 is still a safe default if you want a single rule to follow across your whole design.
What exactly counts as “large text” under WCAG?
WCAG defines large text as 18 point (24px) or larger at normal weight, or 14 point (approximately 18.67px) or larger when set in bold (font-weight 700 or higher). The size refers to the final rendered size seen on screen, not the CSS font-size value before transforms or scaling. Text that barely meets the 14pt bold threshold still benefits from the relaxed 3:1 AA ratio, but if you are unsure whether your type qualifies, applying the 4.5:1 normal-text rule everywhere removes any ambiguity.
Does contrast apply to buttons, icons, and input borders?
Yes. WCAG 1.4.11 (Non-text Contrast) requires a 3:1 ratio between the visual indicator of a UI component — such as a button border, checkbox square, or the edge of a text input — and the adjacent color. The same threshold applies to parts of icons, charts, and diagrams that carry meaning. Elements that are purely decorative, disabled, or where the component's appearance is entirely determined by the browser's default styling are exempt. Focus indicators on interactive elements are also covered and must meet 3:1 against both the adjacent color and the unfocused state.
My brand color fails AA — do I have to change it?
Not necessarily. Brand colors often work fine as background fills, decorative accents, icon fills, or border highlights — contexts that either do not carry text or fall under the more lenient 3:1 threshold. The fix is to reserve a compliant, darker (or lighter) variant of that hue for text and interactive labels. Adjusting lightness while keeping the same hue and saturation usually preserves brand identity while clearing the threshold. This checker's suggested-color feature does exactly that: it nudges your foreground brightness until it passes 4.5:1, giving you a starting point for a compliant palette variant.
Is WCAG AAA required by law?
In most jurisdictions, no. Legal mandates — including the EU Web Accessibility Directive, the UK Equality Act guidance, Canada's AODA, and US Section 508 — typically reference WCAG 2.1 or 2.2 at Level AA. WCAG itself acknowledges that AAA cannot be achieved for all content, so it is treated as a stretch goal rather than a baseline requirement. That said, publicly funded bodies in some regions are increasingly expected to strive for AAA where feasible, and products targeting users with known visual impairments benefit enormously from the higher threshold.
Does poor contrast only affect users with low vision?
No — low contrast affects almost everyone in the right conditions. Reading on a phone screen in bright sunlight, on a budget display with poor black levels, in a brightly lit office with screen glare, or while tired all degrade effective contrast perception. Users with aging eyes, color vision deficiency (which affects roughly 8% of males), or temporary conditions like eye strain also struggle with borderline contrast. High-contrast text is simply easier to read for all users, which is why improving contrast tends to increase reading speed and reduce errors even in controlled studies with sighted participants.
Does dark mode change which colors pass?
Yes. A color pair that passes in light mode may fail in dark mode if you simply invert the colors without rechecking. For example, a dark text on a light background that just clears 4.5:1 will still be fine when flipped to light text on a dark background — the ratio is symmetric — but if you lighten the text slightly for aesthetic reasons in dark mode, the ratio can drop below the threshold. Always run your dark-mode palette through a contrast checker separately. This tool accepts any foreground/background combination, so checking dark-mode pairs takes just a few seconds.
Contrast ratios are computed using the WCAG 2.x relative luminance formula (sRGB, IEC 61966-2-1) entirely in your browser. No color data is transmitted to any server. Results reflect WCAG 2.2 success criteria 1.4.3 (Contrast Minimum) and 1.4.6 (Contrast Enhanced).