WCAG Contrast Checker
Enter foreground and background colours to instantly see the contrast ratio and WCAG 2.2 AA/AAA pass/fail — with suggestions, history, and a shareable link, all in your browser.
Enter colours above to see the live preview.
Guide
How to use the Contrast Checker
- 1 Enter a foreground colour
Type a colour in the FG field using HEX (e.g. #333333), RGB (e.g. rgb(51, 51, 51)), or HSL. You can also click the colour swatch to open the native colour picker.
- 2 Enter a background colour
Type or pick a background colour in the BG field. Use the same formats: HEX, RGB, or HSL. Alpha values are supported — the tool composites transparent colours over white automatically.
- 3 Read the contrast ratio
The tool instantly calculates the WCAG 2.x contrast ratio between the two colours and displays it as a number to 2 decimal places (e.g. 4.52:1).
- 4 Check AA and AAA badges
Four badges show pass/fail for WCAG 2.2 levels: AA Normal (4.5:1), AA Large (3:1 for text ≥24 px bold or ≥18.67 px), AAA Normal (7:1), and AAA Large (4.5:1).
- 5 Use the live preview
The preview card shows normal (16 px) and large (24 px) text in the foreground colour on the background colour, so you can see exactly how your pairing will look.
- 6 Apply a colour suggestion
If the pair fails AA Normal, the suggestions bar appears with up to 5 adjusted colour options. Toggle between Foreground and Background to adjust either colour. Click a swatch to apply it.
- 7 Share or copy the result
Click “Share link” to copy a permalink with your colour pair encoded in the URL hash. Click “Copy result” to copy the ratio and WCAG status to your clipboard.
- 8 Swap or reset
Use the swap button (⇆) between the two fields to swap FG and BG, or click Reset to clear both fields and return to the empty state.
Reference
WCAG 2.2 contrast thresholds
| Level | Minimum ratio | Use case |
|---|---|---|
| AA Normal text | 4.5:1 | Body text, UI labels, links under 18.67 px or 14 px bold |
| AA Large text | 3:1 | Text ≥18.67 px (14 pt) regular, or ≥14 px (10.5 pt) bold |
| AAA Normal text | 7:1 | Enhanced body text for users with low vision |
| AAA Large text | 4.5:1 | Enhanced large text |
Frequently asked questions
What is the WCAG contrast ratio?
The WCAG contrast ratio is a number from 1:1 (no contrast — identical colours) to 21:1 (maximum contrast — black on white). It is calculated from the relative luminance of the two colours using the IEC 61966-2-1 sRGB linearisation formula defined in WCAG 2.x. A higher ratio means more contrast and better readability for users with low vision or colour deficiency.
What is the minimum contrast ratio for WCAG AA?
WCAG 2.2 Level AA requires a contrast ratio of at least 4.5:1 for normal text (under 18.67 px or 14 px bold) and 3:1 for large text (18.67 px or larger, or 14 px or larger bold). These are the thresholds that the majority of websites must meet to pass web accessibility standards.
What is the difference between AA and AAA?
AA is the standard conformance level required by most accessibility regulations (WCAG 2.2 §2.4.3). AAA is the enhanced level — it requires 7:1 for normal text and 4.5:1 for large text. AAA is recommended for public-sector content and applications used by people with significant visual impairments, but is not mandated for all content.
How does alpha (transparency) affect the contrast ratio?
Transparent colours look different depending on what is behind them. This tool follows the WCAG specification by compositing the foreground colour over the background colour using Porter-Duff source-over blending, then compositing the result over opaque white. The contrast ratio is calculated from the fully composited, opaque colours, giving you the real-world ratio a user sees on a white page.
What colour formats does the tool accept?
The tool accepts HEX (#RGB, #RGBA, #RRGGBB, #RRGGBBAA, case-insensitive, with or without the # prefix), RGB/RGBA (e.g. rgb(255, 87, 51) or rgba(255, 87, 51, 0.5)), and HSL/HSLA (e.g. hsl(14, 100%, 60%)). Alpha values can be 0–1 or 0%–100%.
Does the tool send my colours to a server?
No. All colour parsing and contrast calculations happen in your browser using JavaScript. Your colour data is never sent anywhere — it stays on your device. The shareable link encodes the colour pair in the URL hash, which browsers do not include in HTTP requests.
Why does 4.50 sometimes show as failing AA Normal?
The WCAG specification compares the unrounded contrast ratio against the threshold. A ratio of 4.4996 will display as 4.50 after rounding to 2 decimal places, but it still fails AA Normal because the raw value is below 4.5. This tool evaluates the raw ratio, so the badge is always accurate even when the display value appears to be on the boundary.
How do the colour suggestions work?
When a colour pair fails AA Normal, the tool generates up to 5 adjusted colour suggestions by incrementally shifting the target colour’s lightness (in HSL space) toward the direction that increases contrast, until the ratio crosses the 4.5 threshold. Candidates are spread from the minimum-passing lightness to slightly above. Click a swatch to apply it and see the updated ratio instantly.