WCAG Contrast Checker
Enter any two colours to see their WCAG 2.1 contrast ratio and whether they meet AA or AAA accessibility standards for text and UI components. Runs entirely in your browser — nothing is uploaded.
Live preview
The quick brown fox jumps over the lazy dog. Bold text.
Large text sample (24px)
Bold large text (18.67px bold)
Try a preset:
WCAG 2.1 contrast thresholds
| Level | Minimum ratio | Applies to |
|---|---|---|
| AA Normal Text | 4.5:1 | Body text at any size |
| AA Large Text | 3:1 | ≥ 18pt (24px) or ≥ 14pt (18.67px) bold |
| AA UI Components | 3:1 | Icons, borders, input outlines |
| AAA Normal Text | 7:1 | Enhanced — recommended for critical content |
| AAA Large Text | 4.5:1 | Enhanced large text |
How the contrast ratio is calculated
The WCAG 2.1 contrast ratio uses relative luminance, which models how bright a colour appears to the human eye on a standard monitor.
- Normalise each RGB channel — divide the 0–255 value by 255 to get a number between 0 and 1.
- Linearise (remove gamma) — values ≤ 0.04045 are divided by 12.92; values above that are ((c + 0.055) / 1.055)2.4. This reverses the sRGB gamma encoding used by screens.
- Compute luminance — L = 0.2126 × Rlin + 0.7152 × Glin + 0.0722 × Blin. The coefficients reflect human perception: we're most sensitive to green light and least to blue.
- Compute the ratio — (Llighter + 0.05) / (Ldarker + 0.05). The 0.05 offset prevents division by zero and accounts for the smallest perceivable difference in a lit environment.
Worked example — #1a2e4a on #f0f4f8:
Foreground: R=26, G=46, B=74 → L ≈ 0.0268.
Background: R=240, G=244, B=248 → L ≈ 0.8893.
Ratio = (0.8893 + 0.05) / (0.0268 + 0.05) = 0.9393 / 0.0768 ≈ 12.23:1 — well
above the 7:1 AAA threshold.
A short history of the WCAG contrast rules
The contrast ratio you see above comes from the Web Content Accessibility Guidelines (WCAG), published by the World Wide Web Consortium (W3C). WCAG 2.0 was finalised on 11 December 2008 and later adopted verbatim as an international standard, ISO/IEC 40500:2012. Remarkably, the two text-contrast rules — Success Criterion 1.4.3 (Contrast Minimum, the AA level) and 1.4.6 (Contrast Enhanced, the AAA level) — have been unchanged since 2008. WCAG 2.1, published in June 2018, kept them and added Success Criterion 1.4.11 (Non-text Contrast) for buttons, icons and form fields. WCAG 2.2 followed in October 2023, again leaving the contrast maths alone. So the 4.5:1 and 7:1 thresholds this tool checks are not a trend — they are a stable, internationally ratified standard that has guided web design for well over fifteen years.
Who actually relies on good contrast
Contrast is one of the few accessibility features that quietly helps almost everyone, which is why the rules are framed around measurable luminance rather than designer taste. The people most affected include:
- People with low vision — from conditions such as cataracts, glaucoma, diabetic retinopathy or macular degeneration — for whom low-contrast text can be effectively invisible.
- Older readers. The lens of the eye yellows and lets through less light with age, so contrast that is comfortable at 25 can be a struggle at 65 — and the over-65 group is a large and growing share of every audience.
- People with colour vision deficiency. An estimated 300 million people worldwide — roughly 1 in 12 men and 1 in 200 women — see colour differently. Because the WCAG ratio is based on lightness rather than hue, text that passes it stays legible even when two colours look similar.
- Everyone, in the wrong conditions. Bright sunlight on a phone, a cheap or dimmed laptop panel, a projector in a lit room, or a low-battery "reduce brightness" mode all sap effective contrast. Designing to the standard means your interface survives the real world, not just a calibrated studio monitor.
Non-text contrast: the 3:1 rule for UI and graphics
Text is not the only thing users have to see. WCAG 2.1's Success Criterion 1.4.11 extended the contrast requirement to non-text elements: the visible boundary of a button or input field, a focus outline, a toggle, a checkbox, an icon that conveys meaning, or the lines and bars of a chart. These must reach at least 3:1 against whatever sits next to them. The lower threshold reflects that a solid shape is easier to perceive than the fine strokes of a letter — but it is a real requirement, and it is one of the most commonly missed. A pale-grey input border on a white card, or a light-grey "inactive" tab, frequently fails 1.4.11 even when the page's body text passes comfortably. Use the checker above on your borders, icons and focus rings, not just your paragraphs.
Designing for colour blindness: never rely on hue alone
Contrast and colour are related but distinct accessibility concerns. A red "error" message on a green background can have perfectly adequate lightness contrast yet be nearly indistinguishable to someone with red-green colour blindness (deuteranopia, the most common type, affects roughly 1% of men on its own). The fix is the same principle WCAG enforces elsewhere: never use colour as the only way to carry information.
- Pair colour with a second cue — an icon (✓ / ✗), a text label, an underline, a pattern, or a change in shape — so the meaning survives without the colour.
- Keep a strong lightness difference between foreground and background, which is exactly what the ratio above measures and what helps colour-blind users most.
- Avoid the classic problem pairs — red/green, and to a lesser extent blue/purple and green/brown — for anything that must be told apart at a glance.
Where WCAG AA is the law
Meeting WCAG 2.1 Level AA — including these contrast thresholds — is not just good practice; in much of the world it is a legal obligation:
| Jurisdiction | Framework | Applies to |
|---|---|---|
| United States | Section 508; ADA (via DOJ guidance & case law) | Federal agencies, and increasingly private "places of public accommodation." |
| European Union | EN 301 549; Web Accessibility Directive | Public-sector websites and apps; references WCAG AA. |
| European Union | European Accessibility Act (in force 28 June 2025) | Many private products and services — e-commerce, banking, e-books and more. |
| United Kingdom | Public Sector Bodies Accessibility Regulations; Equality Act | Public-sector sites; broad anti-discrimination duty. |
| Canada / others | ACA, AODA and similar national laws | Government and, in places, private organisations. |
Because nearly all of these cite WCAG 2.x Level AA, hitting at least 4.5:1 for normal text and 3:1 for large text and UI components is the practical compliance bar in most markets. This tool implements that exact standard.
APCA and WCAG 3: why the ratio may change
The current ratio is simple and stable, but it is also an approximation of human perception, and it has known blind spots — it can be slightly too strict on dark-mode (light-on-dark) combinations and slightly too lenient on some mid-tones, and it ignores font weight and size beyond the single "large text" cutoff. The successor standard, WCAG 3 (still an early draft), explores a different method: the Accessible Perceptual Contrast Algorithm (APCA), developed by Andrew Somers.
Rather than a symmetric ratio, APCA produces a perceptual "Lc" (lightness contrast) value that accounts for things the old formula cannot:
- Polarity — dark text on a light background and light text on a dark background are scored differently, because the eye genuinely perceives them differently.
- Font weight and size — thin, small text needs more contrast than bold, large text, and APCA bakes that relationship in instead of using one blunt threshold.
- Modern displays — the model is tuned for today's bright, high-resolution screens rather than the CRTs of the 2000s.
APCA is promising but not yet a legal requirement anywhere, and WCAG 3 is years from finalisation. Until it ships, WCAG 2.x — the ratio you see above — remains the standard you are audited and held to, which is why this checker reports it. Treat APCA as a useful sanity-check for dark themes and fine type, not as a replacement for passing 2.x AA today.
Frequently asked questions
- What is the WCAG contrast ratio?
- The WCAG (Web Content Accessibility Guidelines) contrast ratio measures how different two colours appear to a person with normal or low vision. It is calculated from the relative luminance of each colour using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour and L2 the darker. The ratio ranges from 1:1 (identical colours) to 21:1 (black on white). WCAG 2.1, the current standard, requires at least 4.5:1 for normal text (AA level) and 7:1 for the enhanced AAA level.
- What is the difference between WCAG AA and AAA?
- AA is the minimum legal compliance level for most countries and frameworks (WCAG 2.1 Level AA). AAA is the enhanced "gold standard." For normal text: AA requires ≥ 4.5:1 and AAA requires ≥ 7:1. For large text: AA requires ≥ 3:1 and AAA requires ≥ 4.5:1. Most accessibility audits target AA; AAA is reserved for high-stakes content such as medical or legal pages.
- What counts as "large text" under WCAG?
- WCAG defines large text as at least 18pt (24px) in normal weight, or at least 14pt (approximately 18.67px) in bold weight. At these sizes, lower contrast is acceptable because larger letterforms are easier to distinguish, so the threshold drops from 4.5:1 to 3:1 for AA.
- How is relative luminance calculated?
- Each RGB channel (0–255) is divided by 255 to get a value in [0, 1], then linearised: values ≤ 0.04045 are divided by 12.92; values above that are ((c + 0.055) / 1.055) raised to the power 2.4. The luminance is then: L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin. These coefficients reflect human perception: the eye is most sensitive to green light and least sensitive to blue.
- Does a 3:1 ratio pass WCAG for body text?
- No — 3:1 only passes for large text (AA level) and UI components such as icons and borders. Body text at normal size requires at least 4.5:1 for AA and 7:1 for AAA. A ratio below 3:1 fails all WCAG levels regardless of text size.
- What about APCA / WCAG 3?
- WCAG 3 is in draft and introduces the Advanced Perceptual Contrast Algorithm (APCA), which models perceived contrast more accurately for modern screens. APCA is not yet a legal requirement anywhere. This tool implements WCAG 2.1 (the current ratified standard) which is required by ADA, EN 301 549, and most national accessibility laws.