TOOLGRID
65 TOOLS

CSS y color

Color Contrast Checker

Check foreground-background color contrast against WCAG 2.1 AA and AAA thresholds for text and UI.

Browser-onlyInstant outputLocal data

Relación de contraste

17.35:1

Texto normal AA

Aprobado

Texto normal AAA

Aprobado

Texto grande AA

Aprobado

Texto grande AAA

Aprobado

Componentes UI AA

Aprobado

Por qué usar esta herramienta

03

Enter two colors and instantly see the WCAG 2.1 contrast ratio plus pass/fail results for normal text, large text, and non-text UI components.

Color Contrast Checker computes the exact luminance-based contrast ratio between a foreground and background color.

It flags compliance with WCAG 2.1 AA and AAA thresholds for normal text (4.5:1, 7:1), large text (3:1, 4.5:1), and non-text UI (3:1).

Cómo usarla

03
01Pick foreground and background colors using the color picker or paste a hex/rgb value.
02Read the ratio and AA/AAA indicators — all thresholds are shown side-by-side.
03Press Swap colors to quickly invert and re-check.

Revisiones rápidas antes de copiar

03

Confirm the input is the format you intended.

Scan the result before using it in a document, URL, config, or message.

Copy only the output you need.

Preguntas frecuentes

03
What's the difference between AA and AAA?

AA is the baseline required by most accessibility regulations. AAA is a stricter enhanced level. For normal text, AA is 4.5:1 and AAA is 7:1; for large text, AA is 3:1 and AAA is 4.5:1.

What counts as large text?

WCAG defines large text as at least 18pt (24px) regular, or 14pt (18.66px) bold. Anything smaller falls under the normal text thresholds.

How is the ratio calculated?

We follow WCAG 2.1's formula: convert each color to sRGB relative luminance, then compute (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter of the two. The ratio ranges from 1:1 to 21:1.

Herramientas relacionadas

01

Color Converter

Convert colors between Hex, RGB, HSL, and OKLCH with a live swatch and hue slider.