CSS

Contrast Checker

Compare an opaque text color and background against WCAG contrast thresholds.

Result

Readable by design

This 16px sample uses your foreground and background colors.

Example interface boundary

17.74:1

The ratio is rounded for display. Pass/fail uses the full precision ratio.

Normal text · AA Minimum 4.5:1
Pass
Normal text · AAA Minimum 7:1
Pass
Large text · AA Minimum 3:1
Pass
Large text · AAA Minimum 4.5:1
Pass
UI components / graphics Minimum 3:1
Pass
report 

Contrast ratio: 17.74:1
Foreground: rgb(17 24 39)
Background: rgb(255 255 255)
Normal text · AA (≥ 4.5:1): Pass
Normal text · AAA (≥ 7:1): Pass
Large text · AA (≥ 3:1): Pass
Large text · AAA (≥ 4.5:1): Pass
UI components / graphics (≥ 3:1): Pass

Based on opaque sRGB colors. A pass is not a complete accessibility audit.

Compare text and background colors

Enter two opaque sRGB colors to see their contrast ratio and the applicable threshold results. Use the report to check a specific color pair; it is not an audit of the whole page.

How the ratio is calculated

Each sRGB channel is converted to linear light, then weighted to calculate relative luminance: 21.26% red, 71.52% green, and 7.22% blue. The ratio is (lighter luminance + 0.05) / (darker luminance + 0.05). Identical colors give 1:1; black and white give 21:1.

Interpreting WCAG thresholds

  • Normal text needs at least 4.5:1 for AA and 7:1 for AAA.
  • Large text needs 3:1 for AA and 4.5:1 for AAA. Large means at least 18pt (24 CSS px), or 14pt (about 18.67 CSS px) when bold.
  • Relevant interface boundaries and graphical objects generally need 3:1 against adjacent colors. This row evaluates only the supplied color pair; it does not judge whether a particular component is in scope.

A near-threshold example

#777777 on white is about 4.48:1: it passes large-text AA but fails normal-text AA. A displayed ratio near 4.50 may still fail if its unrounded value is below 4.5. Do not round up to claim a pass.

What this checker cannot establish

The calculation assumes two flat, opaque sRGB colors. It does not inspect gradients, background images, blending, anti-aliasing, font weight, hover states, or your entire page. A numerical pass alone does not establish WCAG conformance. Check every relevant state and the least favorable part of a nonuniform background in context.

Related Tools