What contrast ratio is required by WCAG?

WCAG 2.1 sets two thresholds. AA - the most common legal floor - requires 4.5:1 for normal text and 3:1 for large text (18 pt+, or 14 pt+ bold). AAA bumps these to 7:1 and 4.5:1. Non-text UI components and graphical objects need 3:1 against their immediate neighbour.

How is the ratio actually computed?

It's the ratio of relative luminance: (L_lighter + 0.05) / (L_darker + 0.05). Luminance is a weighted sum of the gamma-corrected RGB channels (0.2126 R + 0.7152 G + 0.0722 B). The +0.05 padding handles pure-black backgrounds gracefully. The result lives between 1:1 (identical colours) and 21:1 (black on white).

What counts as 'large text'?

WCAG defines large text as 18 pt and up, OR 14 pt and up when bold. That's roughly 24 px / 18.66 px in CSS pixels when rendered at the default 96 dpi. Large text only needs 3:1 (AA) or 4.5:1 (AAA) because larger glyphs are easier to read at lower contrast - thin small text needs more separation.

Does the ratio change in dark mode?

Yes - it depends only on the actual rendered colours, so you have to check both modes. A `#475569` on `#ffffff` passes AA (6.5:1), but if your dark-mode token swaps to `#475569` on `#0f172a`, you're at 1.6:1 and failing badly. Test both surfaces; that's the whole reason designers ship light + dark colour tokens, not a single shared palette.

What about anti-aliased text or background images?

WCAG's ratio assumes flat colours. For text over a background image, audit the worst-case pixel under the text (usually the lightest spot for dark text). For text with a translucent backplate or text-shadow, compute the ratio against the effective rendered colour. Most tools - including this one - check flat colour pairs only; image-aware audits need a separate tool or manual inspection.

Is passing WCAG enough for accessibility?

Contrast is necessary but not sufficient. You also need readable font choices, semantic HTML, alt text, keyboard support, focus indicators (which themselves need 3:1 contrast against the background), and so on. Contrast is the easiest accessibility test to automate, which is why it gets disproportionate attention - but it's one of many.

Comprobador de contraste

Comprobador de contraste WCAG con ratio en vivo, insignias AA/AAA y texto de muestra.

Funciona en tu navegador

Elige un color de primer plano y otro de fondo. El ratio se actualiza al escribir, y cuatro insignias indican si el par pasa WCAG AA y AAA para texto normal y grande. El texto de muestra se renderiza a los tamaños reales de la spec (14 pt regular, 14 pt bold = grande, 18 pt = grande) para comprobar visualmente, no solo por número.

Primer plano

Fondo

Texto de muestra

Texto de cuerpo a 14 pt regular - la prueba más estricta para contraste de texto normal.

Texto de cuerpo a 16 pt regular - tamaño por defecto del navegador.

Texto grande en negrita a 14 pt - cuenta como «grande» según WCAG.

Texto grande a 18 pt regular - umbral de «texto grande» WCAG.

Título - 24 pt, mucho espacio para respirar.

Ratio de contraste

14.68:1

AA texto normal (4,5:1)Aprobado
AA texto grande (3:1)Aprobado
AAA texto normal (7:1)Aprobado
AAA texto grande (4,5:1)Aprobado

Cómo usarla

Pick the colours
Use the foreground and background pickers, or paste hex values directly. The ratio updates live.
Read the badges
Four badges show pass/fail for AA-normal, AA-large, AAA-normal, AAA-large. The badges that matter depend on your text size.
Try the swap
Click swap to flip foreground and background - useful when designing reversed states (filled buttons, inverted callouts).
Eyeball the samples
Sample text renders at the actual WCAG sizes. If the ratio passes but the text looks rough, your font is too thin - try a heavier weight.

¿Qué es?

A contrast checker computes the WCAG contrast ratio between two colours - usually text on its background - and reports whether the pair meets each WCAG level. The ratio is the ratio of relative luminances (a perceptual measure of brightness), padded so the formula behaves at the extremes. Higher is more readable; 4.5:1 is the WCAG AA floor for normal body text, 7:1 the AAA floor.

Cuándo usarla

Vetting every text-on-background pair in a design system, auditing colours against legal accessibility requirements (Section 508 in the US, EN 301 549 in the EU, AODA in Ontario), choosing brand colours that survive both light and dark themes, picking focus-ring colours that hit 3:1 against the surrounding UI, validating chart colours against gridlines, and double-checking a chosen palette before shipping.

Errores comunes

Testing only the brightest version of a colour token (the dark-mode swap often fails). Treating 3:1 as 'good enough' for body text - that's the large-text threshold; small body text needs 4.5:1. Forgetting that disabled-text exemptions exist in WCAG but don't help end users - if disabled text can't be read, your form is broken. Approving colour pairs from a screenshot - JPEG compression shifts hues; always test the actual hex values from the design tokens.

Preguntas frecuentes

What contrast ratio is required by WCAG?: WCAG 2.1 sets two thresholds. AA - the most common legal floor - requires 4.5:1 for normal text and 3:1 for large text (18 pt+, or 14 pt+ bold). AAA bumps these to 7:1 and 4.5:1. Non-text UI components and graphical objects need 3:1 against their immediate neighbour.
How is the ratio actually computed?: It's the ratio of relative luminance: (L_lighter + 0.05) / (L_darker + 0.05). Luminance is a weighted sum of the gamma-corrected RGB channels (0.2126 R + 0.7152 G + 0.0722 B). The +0.05 padding handles pure-black backgrounds gracefully. The result lives between 1:1 (identical colours) and 21:1 (black on white).
What counts as 'large text'?: WCAG defines large text as 18 pt and up, OR 14 pt and up when bold. That's roughly 24 px / 18.66 px in CSS pixels when rendered at the default 96 dpi. Large text only needs 3:1 (AA) or 4.5:1 (AAA) because larger glyphs are easier to read at lower contrast - thin small text needs more separation.
Does the ratio change in dark mode?: Yes - it depends only on the actual rendered colours, so you have to check both modes. A `#475569` on `#ffffff` passes AA (6.5:1), but if your dark-mode token swaps to `#475569` on `#0f172a`, you're at 1.6:1 and failing badly. Test both surfaces; that's the whole reason designers ship light + dark colour tokens, not a single shared palette.
What about anti-aliased text or background images?: WCAG's ratio assumes flat colours. For text over a background image, audit the worst-case pixel under the text (usually the lightest spot for dark text). For text with a translucent backplate or text-shadow, compute the ratio against the effective rendered colour. Most tools - including this one - check flat colour pairs only; image-aware audits need a separate tool or manual inspection.
Is passing WCAG enough for accessibility?: Contrast is necessary but not sufficient. You also need readable font choices, semantic HTML, alt text, keyboard support, focus indicators (which themselves need 3:1 contrast against the background), and so on. Contrast is the easiest accessibility test to automate, which is why it gets disproportionate attention - but it's one of many.