Large text looks like this
Body copy at normal size needs at least 4.5:1 contrast to pass WCAG AA, and 7:1 for AAA. Large or bold text only needs 3:1 and 4.5:1.
Colors
Text color
Background color
Type HEX, RGB, HSL or OKLCH — or click a swatch to pick. Use the share icon to find a passing shade in Tints & Shades.
Contrast Ratio
- AA Normal text4.5:1Pass
- AA Large text3:1Pass
- AAA Normal text7:1Pass
- AAA Large text4.5:1Pass
- UI Components & graphics3:1Pass
Suggest a Fix
CSS
/* Contrast 9.98:1 — passes WCAG AAA */
.text {
color: #4c1d95;
background-color: #f5f3ff;
}About CSS Color Contrast Checker
Check the contrast ratio between a text color and a background color against WCAG 2 AA and AAA. See the result live on real text, buttons and links, get a suggested fix when a pair fails, then copy the CSS.
How to Check Color Contrast
- 1Enter a text color and a background color — type HEX, RGB, HSL or OKLCH, or click a swatch to pick.
- 2Read the contrast ratio and check which WCAG levels pass: AA and AAA for normal and large text, plus UI components.
- 3If you use semi-transparent text, set Text opacity — the ratio is measured on the color the browser actually paints.
- 4When a level fails, choose it as the target in Suggest a Fix and apply the adjusted text or background color.
- 5Copy the CSS, or copy the page URL to share the exact color pair.
Frequently Asked Questions
WCAG 2 Level AA requires at least 4.5:1 for normal text and 3:1 for large text. User interface components and meaningful graphics, such as input borders and icons, need at least 3:1 against what is next to them.
AA is the level most laws and accessibility policies point to. AAA is stricter: 7:1 for normal text and 4.5:1 for large text. AAA is a good target for long-form reading, but it is not required for whole sites.
WCAG defines large text as at least 18pt (24px) regular, or at least 14pt (about 18.66px) bold. Anything smaller is normal text and needs the higher ratio.
Each color's relative luminance is calculated from its linearized sRGB channels, then the ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The result runs from 1:1 (identical colors) to 21:1 (black on white).
Transparent text is blended with the background before it reaches the screen, so the color people actually see is closer to the background. The checker measures that blended color, which is why 60% opacity text can fail even when the solid color passes.
It keeps the hue and saturation and only moves lightness, in the perceptual OKLCH color space, to the nearest value that reaches your target level. You can adjust either the text or the background. Some targets are impossible from one side — no text color reaches 7:1 on a mid-gray background — and the checker tells you when that happens.
Related Tools
More free CSS generators you might like.