Color Contrast Checker: WCAG AA and AAA
Check the WCAG 2.x contrast ratio of a text colour on a background colour, with AA and AAA pass or fail for normal text, large text and UI components. Any colour notation, translucent text, swap and live preview. Nothing is uploaded.
Contrast ratio: 5.99:1
| Use | AA | AAA |
|---|---|---|
| Normal text | Pass | Fail |
| Large text | Pass | Pass |
| UI components and graphics | Pass | No AAA level |
Normal text: the quick brown fox jumps over the lazy dog.
Large text sample
Sample buttonAbout the Color Contrast Checker
The Color Contrast Checker tells you whether text in one colour can be read on a background in another, by the rules of the Web Content Accessibility Guidelines (WCAG) 2.x. Type or pick a text colour and a background colour in any common notation, such as #336699, rgb(51 102 153), hsl(210 50% 40%), oklch() or a CSS name, and the page shows the contrast ratio, a pass or fail table for AA and AAA, and a live preview with sample text and a sample button.
Nothing is uploaded; every check runs in your browser and never leaves your device.
How to use it
Two colours
Type the text colour and the background colour, or use the two colour pickers. Press Swap colours to try light text on a dark background; the ratio stays the same, because the formula only cares which colour is lighter. When a colour cannot be read, its own field explains why and no ratio is shown, so a stale result is never left on screen.
Translucent text
A text colour with alpha, such as rgba(0, 0, 0, 0.5), is blended over the background first, in unrounded sRGB, and the ratio is taken from the blended colour. Half-transparent black on white blends to a grey of 127.5 and gives 3.97:1. A translucent background is refused, because what shows through it depends on whatever lies behind the page.
The formula
The ratio compares the relative luminance of the lighter colour with that of the darker one:
Each sRGB channel from 0 to 1 is first made linear: when it is at most 0.03928, otherwise . Then . The ratio runs from 1:1 for two equal colours to 21:1 for black on white.
Thresholds
- Normal text: AA needs 4.5:1 and AAA needs 7:1 (success criteria 1.4.3 and 1.4.6).
- Large text: at least 18 pt, or 14 pt bold. AA needs 3:1 and AAA needs 4.5:1.
- UI components and graphics: AA needs 3:1 (success criterion 1.4.11). WCAG 2.x defines no AAA level for them.
Rounding
The ratio is shown cut off, not rounded, to two decimals. Pass or fail always uses the exact ratio. #777777 on white is 4.478:1; it shows as 4.47:1 and fails AA for normal text, while #767676 is 4.542:1 and passes. Rounding up would show 4.48 or even 4.5 and suggest a pass that WCAG does not give.
Related tools
Convert a colour between HEX, RGB, HSL, HWB, CMYK and OKLCH with the color converter, or build a whole scheme with the color palette generator.
Frequently asked questions
What contrast ratio do I need for WCAG AA?
Normal text needs at least 4.5:1, and large text needs at least 3:1. User interface components and meaningful graphics, such as button borders and icons, also need 3:1 against what is next to them.
What counts as large text?
WCAG 2.x calls text large when it is at least 18 point, which is about 24 CSS pixels, or at least 14 point bold, which is about 18.7 CSS pixels. Large text needs less contrast because it is easier to read.
Why does 4.478 show as 4.47 and fail?
The ratio is cut off to two decimals rather than rounded, and pass or fail always uses the exact ratio. A ratio of 4.478 is below 4.5, so it fails AA for normal text, and showing 4.48 would look closer to a pass than it is.
Why is there no AAA level for UI components?
Success criterion 1.4.11 for non-text contrast only defines a 3:1 minimum at level AA. WCAG 2.x has no stricter AAA requirement for buttons, form borders, focus rings or icons, so the table says No AAA level.
How is a translucent text colour measured?
The text colour is blended over the background in unrounded sRGB, and the ratio is taken from the blended colour. A translucent background is refused, because what shows through it depends on the page behind it.
Does this checker use APCA from WCAG 3?
No. It uses the WCAG 2.x formula, which is the one referenced by current laws and accessibility audits. APCA is still a draft for WCAG 3 and gives different numbers, so it is not mixed in here.