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.
Contrast Ratio —
Normal text (AA) —
Large text (AA) —
UI components (AA) —
Normal text (AAA) —
Large text (AAA) —
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.
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.