Accepted formats: hexadecimal (#1a1a1a, #1a1a1a80), rgb() and rgba(), hsl() and hsla(), common CSS names (navy, white…).
–
Large text preview
Normal text preview: the quick brown fox jumps over the lazy dog.
| Result | Criterion |
|---|
Several pairs at once
Separator: semicolon, tab or vertical bar. The table updates as you type.
| Text | Background | Ratio | Normal AA | Normal AAA | Large AA | Large AAA | Components | Corrected text |
|---|
How to use the tool
Enter or pick the text color and the background color, with the picker or by typing the value. The ratio appears immediately, followed by a results table for five use cases and a preview of the text on the background. If the pair fails the AA level for normal text, the tool suggests the nearest text color that passes it.
To check a whole palette, paste one pair per line in the second field, as “text ; background”. The table gives the result of each line and downloads as CSV. Unreadable lines are flagged without blocking the others.
What the tool computes
The W3C defines the contrast ratio with the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 that of the darker one.1 Relative luminance is 0.2126 × R + 0.7152 × G + 0.0722 × B, each sRGB channel being linearized first: divided by 12.92 if it is at or below 0.04045, otherwise ((value + 0.055) / 1.055) raised to the power 2.4.1 The ratio runs from 1:1 (two identical colors) to 21:1 (black on white).
| Case | AA level | AAA level |
|---|---|---|
| Normal text | 4.5:1 (criterion 1.4.3) | 7:1 (criterion 1.4.6) |
| Large text | 3:1 (criterion 1.4.3) | 4.5:1 (criterion 1.4.6) |
| UI components and graphical objects | 3:1 (criterion 1.4.11) | no AAA level |
Text thresholds from WCAG 2.2.1
Large text means text of at least 18 point, or 14 point bold. The W3C states that 1 point is about 1.333 CSS pixels, so roughly 24 px and 18.5 px.2 Criterion 1.4.11 asks for 3:1 against adjacent colors for the interface elements needed to identify a component and its states, and for the parts of a graphic needed to understand it.1
No rounding up
The W3C writes that computed values should not be rounded: 4.499:1 does not meet 4.5:1.2 The tool therefore compares the exact ratio to the threshold, and it displays the ratio truncated to two decimals, never rounded up. Gray #767676 on white gives 4.54:1 and passes narrowly, while #777777 gives 4.47:1 and fails.
The corrected color
When the pair fails the AA level for normal text, the tool looks for the nearest text color that reaches 4.5:1. It converts the color to hue, saturation and lightness, keeps the hue and saturation and only changes the lightness, towards lighter or darker depending on which needs the smaller change. The suggestion is a starting point: check that it fits your brand palette.
Transparent colors
A color with an alpha channel has no contrast of its own, since it depends on what sits behind it. The tool composites the transparent text over the background you entered before measuring, and it composites a transparent background over white, an assumption of the tool. When transparency is detected, the page shows the two opaque colors actually measured.
Limits
The tool measures a ratio between two colors and nothing else. It does not assess the accessibility of a whole site: keyboard navigation, alternative texts, heading structure or screen reader compatibility all remain to be checked.
Three cases need a manual check. Images of text and gradients have no single background color, and the W3C lists background images without enough contrast among the failures of the criterion.2 Hover, focus and disabled states each have colors to check separately. Purely decorative text, invisible text and text that is part of a logo are exempt from the criterion.1
Contrast and SEO
Contrast is a matter of accessibility: a visitor with low vision, or simply in front of a screen in the sun, reads pale text on a light background poorly. The tool says nothing about your ranking in Google. To check the rest of a page, run the on-page SEO audit. Image alternative texts also touch accessibility, and the alt text checker reviews them.
Frequently asked questions
What contrast ratio does text need?
The AA level requires 4.5:1 for normal text and 3:1 for large text. The AAA level raises this to 7:1 and 4.5:1.
What counts as large text?
Text of at least 18 point, or 14 point bold. In CSS pixels, that is roughly 24 px and 18.5 px.
Why does 4.49:1 fail when it looks close to 4.5:1?
The W3C forbids rounding: 4.499:1 does not meet 4.5:1. The tool compares the exact value to the threshold.
How does the tool handle transparency?
It composites the transparent text over the background you entered, and a transparent background over white, then measures the contrast of the resulting opaque colors. The page shows these values.
Are my colors sent anywhere?
No. The computation runs in your browser and nothing is sent to the server.
Sources
The passages of this page that rely on a source point to one of these references. Sources read on 22 October 2026.
- W3C, “Web Content Accessibility Guidelines (WCAG) 2.2”: success criteria 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced) and 1.4.11 Non-text Contrast, definitions of relative luminance and large scale text. The ratio (L1 + 0.05) / (L2 + 0.05) is given in the definition of contrast ratio. www.w3.org ↑
- W3C WAI, “Understanding Success Criterion 1.4.3: Contrast (Minimum)”, updated 6 September 2026: no rounding, points to pixels, failure F83 (background images). www.w3.org ↑