WCAG AA contrast checker
Enter foreground and background colours to check whether they meet the WCAG 2.1 Level AA contrast requirements, the minimum standard for most accessibility regulations. Results update as you type.
| Contrast ratio | 21.00 : 1 |
| AA. Normal text (≥4.5:1) | pass |
| AA. Large text (≥3:1) | pass |
| AAA. Normal text (≥7:1) | pass |
| AAA. Large text (≥4.5:1) | pass |
MODE
PRESETS
How it works
WCAG contrast is computed using relative luminance: each sRGB channel is linearised (gamma-corrected), then combined as L = 0.2126R + 0.7152G + 0.0722B. The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter colour. APCA uses the separate APCA-W3 0.0.98G algorithm which accounts for polarity and produces an Lc value. All computation runs entirely in your browser.
Processing runs in your browser
All contrast calculations happen in your browser tab. Our servers are not involved at any point.
Related operations
To swap a HEX value into RGB or HSL while testing, try the colour converter. For generating an accessible swatch set from a brand colour, use the colour palette generator. To create lighter or darker variants that still pass contrast, see tints and shades.
Frequently asked questions
- What is WCAG AA?
- WCAG 2.1 Level AA is the Web Content Accessibility Guidelines' standard accessibility level. It requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).
- What contrast ratio do I need for AA compliance?
- Normal text: 4.5:1 minimum. Large text (18pt / 24px or 14pt / ~19px bold): 3:1 minimum. UI components and graphical objects: 3:1 minimum.
- How is the contrast ratio calculated?
- The WCAG contrast ratio uses relative luminance: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour's luminance and L2 is the darker colour's luminance. Luminance is computed from the sRGB values using gamma correction.