The quick brown fox
Large text sample — jumps over the lazy dog.
Normal body text. The five boxing wizards jump quickly. Pack my box with five dozen liquor jugs, and check whether this paragraph stays comfortably readable at your chosen contrast level.
What is Color Contrast?
Color contrast is the measurable difference in perceived brightness between two colors — typically text and the background it sits on. When that difference is too small, text becomes hard to read, especially for people with low vision, color blindness, or those viewing a screen in bright sunlight. A contrast checker quantifies this difference as a single number, the contrast ratio, so you can verify a color pairing is legible before shipping it.
This tool implements the contrast model defined by the Web Content Accessibility Guidelines (WCAG) 2.1, the international standard maintained by the W3C and referenced by accessibility laws such as the ADA, Section 508, and the European EN 301 549. Everything runs in your browser — no colors are ever sent to a server.
WCAG: AA vs AAA, Normal vs Large Text
WCAG defines two conformance levels for text contrast, each with a different threshold depending on text size:
- AA, normal text — 4.5:1. The practical baseline that most websites and apps are required to meet. Applies to body copy, labels, and any text smaller than the large-text threshold.
- AA, large text — 3:1. Larger letterforms stay legible at lower contrast, so the bar is relaxed.
- AAA, normal text — 7:1. The enhanced level, used where the highest readability matters — for example content aimed at users with significant vision loss.
- AAA, large text — 4.5:1. The enhanced threshold for large text.
Large text in WCAG means at least 18pt (24px) at a regular weight, or at least 14pt (18.66px) when bold. Anything smaller is treated as normal text and must meet the stricter ratio. There is also a separate requirement, success criterion 1.4.11, that the boundaries of UI components and graphical objects (button outlines, focus rings, icons, chart segments) meet at least 3:1.
How to Use This Tool
- Enter your foreground (text) color as a hex code, or click its color swatch to pick visually. The text input and the picker stay in sync.
- Do the same for the background color.
- Read the large contrast ratio — a number between 1:1 (identical colors) and 21:1 (black on white).
- Scan the pass/fail badges to see exactly which WCAG criteria your pair meets. Each badge shows a clear "Pass" or "Fail" label plus a check or cross, so the result never depends on color alone.
- Look at the live preview to judge real legibility — a heading, a large sample, and a paragraph rendered in your actual colors.
- Use Swap colors to flip foreground and background, or Copy ratio to grab the value. The URL updates as you go, so you can share the exact pairing.
How the Contrast Ratio is Calculated
The contrast ratio is not a naive difference of hex values — it is based on relative luminance, a model of how bright a color appears to the human eye. The calculation has two steps.
First, each color's three sRGB channels (0–255) are normalized to 0–1 and linearized to undo display gamma. A channel value c becomes c/12.92 when c ≤ 0.03928, otherwise ((c + 0.055) / 1.055)2.4. The linear channels are then weighted by how sensitive our eyes are to each: L = 0.2126·R + 0.7152·G + 0.0722·B. Green dominates because the eye is most sensitive to it; blue contributes the least.
Second, the two luminances are combined with the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 the darker. The + 0.05 term models ambient light reflecting off the screen and keeps the ratio finite. The result ranges from 1:1 (two identical colors) up to 21:1 (pure black against pure white). Because the formula picks the lighter and darker color automatically, swapping foreground and background never changes the ratio.
Frequently Asked Questions
What is a good color contrast ratio?
WCAG 2.1 sets a minimum contrast ratio of 4.5:1 for normal body text at Level AA, and 3:1 for large text. For the stricter Level AAA, the thresholds are 7:1 for normal text and 4.5:1 for large text. A ratio of 21:1 (black on white) is the maximum possible, and 1:1 means the two colors are identical.
What counts as large text in WCAG?
WCAG defines large text as at least 18pt (24px) for regular weight, or at least 14pt (18.66px) when bold. Large text qualifies for the relaxed contrast thresholds of 3:1 (AA) and 4.5:1 (AAA) because larger letterforms remain legible at lower contrast.
How is the contrast ratio calculated?
The contrast ratio is computed from the relative luminance of each color using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. Each color's luminance is derived by linearizing its sRGB channels (gamma correction) and weighting them 0.2126 red, 0.7152 green, and 0.0722 blue.
What is the difference between AA and AAA?
AA and AAA are WCAG conformance levels. AA is the widely adopted legal and practical baseline (4.5:1 normal, 3:1 large). AAA is the enhanced level (7:1 normal, 4.5:1 large) used where the highest readability is required, such as for users with low vision. Most organizations target AA.
Does contrast checking apply to icons and UI elements?
Yes. WCAG 2.1 success criterion 1.4.11 (Non-text Contrast) requires a 3:1 ratio for the visual boundaries of active UI components — buttons, form field borders, focus indicators — and for meaningful graphical objects such as icons and chart segments.
Why should I not rely on color alone?
Color blindness affects roughly 1 in 12 men and 1 in 200 women, so information conveyed only through color can be missed. Good contrast helps, but you should also pair color with text labels, icons, underlines, or patterns so that meaning is never carried by color alone.