WCAG Contrast Checker
Normal text sample (16 px)
Large text sample (24 px)
#333333BG: #FFFFFFWCAG 2.2 · All thresholds passOverview
Check color contrast against WCAG
Enter foreground and background colors 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.
Guide
How to use the Contrast Checker
- 1 Enter a foreground color
The checker opens with #333333 on #FFFFFF. Type a color in the Foreground field using HEX (e.g. #333333), RGB (e.g. rgb(51, 51, 51) or rgb(51 51 51)), HSL, or a CSS color name such as navy. You can also click the color swatch to open the native color picker.
- 2 Enter a background color
Type or pick a background color in the Background field. Use the same formats: HEX, RGB, HSL, or a color name. Alpha values are supported — the tool composites transparent colors over white automatically.
- 3 Read the contrast ratio
The tool instantly calculates the WCAG 2.2 contrast ratio between the two colors and displays it truncated to 2 decimal places (e.g. 4.52:1), so a ratio just under a threshold never displays as passing.
- 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 (18 pt) regular or >=18.67 px (14 pt) bold), 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 color on the background color, so you can see exactly how your pairing will look.
- 6 Apply a color suggestion
If the pair fails AA Normal, the suggestions bar appears with up to 5 adjusted color options. Toggle between Foreground and Background to adjust either color. Click a swatch to apply it.
- 7 Share or copy the result
Click “Share link” to copy a permalink with your color 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 foreground and background, or click Reset to return to the default pair (#333333 on #FFFFFF).
Reference
WCAG 2.2 contrast thresholds
| Level | Minimum ratio | Use case |
|---|---|---|
| AA Normal text | 4.5:1 | Body text, UI labels, links under 24 px (18 pt) or under 18.67 px (14 pt) bold |
| AA Large text | 3:1 | Text >=24 px (18 pt) regular, or >=18.67 px (14 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 colors) to 21:1 (maximum contrast — black on white). It is calculated from the relative luminance of the two colors using the IEC 61966-2-1 sRGB linearization formula defined in WCAG 2.2. A higher ratio means more contrast and better readability for users with low vision or color vision 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 24 px (18 pt) or under 18.67 px (14 pt) bold) and 3:1 for large text (>=24 px (18 pt) regular, or >=18.67 px (14 pt) 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. 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 colors look different depending on what is behind them. This tool follows the WCAG specification by compositing the foreground color over the background color using Porter-Duff source-over blending, then compositing the result over opaque white. The contrast ratio is calculated from the fully composited, opaque colors, giving you the real-world ratio a user sees on a white page.
What color formats does the tool accept?
The tool accepts HEX (#RGB, #RGBA, #RRGGBB, #RRGGBBAA, case-insensitive, with or without the # prefix), RGB/RGBA in comma or modern space syntax (e.g. rgb(255, 87, 51), rgb(255 87 51 / 50%)), HSL/HSLA (e.g. hsl(14, 100%, 60%) or hsl(14 100% 60%)), and CSS color names such as navy or rebeccapurple. Alpha values can be 0–1 or 0%–100%.
Does the tool send my colors to a server?
No. All color parsing and contrast calculations happen in your browser using JavaScript. Your color data is never sent anywhere — it stays on your device. The shareable link encodes the color pair in the URL hash, which browsers do not include in HTTP requests.
Why is the ratio truncated rather than rounded?
The WCAG specification compares the unrounded contrast ratio against the threshold. A ratio of 4.4994 is below 4.5 and fails AA Normal, but rounding would display it as 4.50 next to a failing badge. This tool truncates the displayed value to 2 decimal places (4.4994 shows as 4.49), so the number you read always agrees with the pass/fail badges.
How do the color suggestions work?
When a color pair fails AA Normal, the tool generates up to 5 adjusted color suggestions by incrementally shifting the target color’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.