Comprobador de Contraste de Color
Check WCAG accessibility compliance
100% gratis. Funciona completamente en tu navegador: tus archivos y datos nunca salen de tu dispositivo y no se sube nada a ningún servidor.
editColours
visibilityLive Preview
Large heading text
This is a normal paragraph at 16px - the size most body copy uses, and the size WCAG AA judges at 4.5:1.
Small print at 13px, the hardest case to pass.
visibility_offColour Blindness
Ratios here are what a viewer with that form of colour vision would perceive. A pair that passes normally can still fail for them.
Acerca de esta herramienta
Contrast ratio measures the difference in relative luminance between two colours, on a scale from 1:1 (identical) to 21:1 (black on white). WCAG sets the thresholds that matter: 4.5:1 for normal text at AA, 3:1 for large text, and 7:1 for normal text at the stricter AAA level. Those numbers are not arbitrary - they come from research into what remains readable for people with moderately reduced vision, which by middle age describes a large share of any audience. Insufficient contrast is consistently the single most common accessibility failure found in automated audits of real websites, and the usual cause is designers choosing light grey text on white because it looks refined on a high-quality monitor in a controlled room. It stops being readable on a phone in sunlight, on a cheap laptop screen, or for anyone over about fifty. Checking takes seconds; the fix is usually darkening one colour slightly. This runs entirely in your browser.
Cómo usar esta herramienta
- Enter your text colourPaste a HEX value or pick one. This is the foreground - the colour the words are drawn in.
- Enter the background colourThe actual colour behind the text, not the page background if a card or overlay sits between them.
- Read the ratio and pass marksYou get the numeric ratio plus whether it passes AA and AAA for normal and large text.
- Adjust if it failsDarkening the text is usually less disruptive to a design than changing the background.
Por qué usarla
- Gives the exact ratio and the pass or fail against every WCAG threshold at once.
- Catches the most common accessibility failure on the web before it ships.
- Distinguishes normal from large text, which have genuinely different requirements.
- Runs in your browser with no account or limit.
- Fast enough to check a whole palette in a couple of minutes.
Usos comunes
- Checking a brand palette before it is locked into a design system.
- Fixing accessibility audit failures on an existing site.
- Meeting a legal or procurement requirement for WCAG AA compliance.
- Validating that placeholder and helper text is readable, not just body copy.
- Deciding whether white or black text works better on a brand colour.
Consejos para mejores resultados
- Aim for AA (4.5:1) as the baseline for body text. AAA is worth targeting for long-form reading but is often impractical for a brand palette.
- Check the states as well as the default - hover, disabled, placeholder and visited link colours all fail more often than body text.
- Large text means 24px regular or 18.66px bold and above. Do not apply the 3:1 allowance to 16px body copy.
- Text over an image needs a solid overlay or text shadow, because contrast varies across the photograph.
- Contrast is measured against what is directly behind the text - a card colour, not the page colour underneath it.
Errores a evitar
- Using light grey on white because it looks elegant on a good monitor. It routinely fails and is the most common failure of all.
- Applying the large-text threshold to normal-size text, which is not what the standard permits.
- Checking body copy only, then leaving placeholder text, disabled buttons and captions failing.
- Assuming a colour that passes on white also passes on your dark theme. Both directions need checking.
- Treating contrast as optional polish. In many jurisdictions accessibility is a legal requirement, not a preference.
Preguntas frecuentes
Enter your text and background colours above. You get the exact contrast ratio and whether it passes WCAG AA and AAA for both normal and large text.
Yes. No account, no limit, and it runs entirely in your browser.
AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. AA is the level most legal requirements and procurement standards reference.
24px (18pt) at regular weight, or 18.66px (14pt) bold and above. Anything smaller is normal text and needs the full 4.5:1 - applying the large-text allowance to 16px body copy is a common misreading.
Because low contrast is unreadable for people with reduced vision, in bright sunlight, or on poor-quality screens. It is also the most frequently flagged issue in accessibility audits and, in many jurisdictions, a legal requirement rather than a nicety.
Yes. WCAG requires 3:1 for meaningful non-text elements - icons that convey information, form field borders, focus indicators. Purely decorative graphics are exempt.
Usually by darkening the text rather than altering the background, or by using the brand colour for large headings and accents where 3:1 applies while keeping body text a darker neutral.
Contrast ratio is luminance-based, which helps but is not a full colour-blindness check. The separate rule is never to rely on colour alone to convey meaning - always pair it with text, an icon or a pattern.
La gente también busca
- color contrast checker wcag
- accessibility contrast ratio
- wcag aa contrast requirements
- contrast checker for website
- colour contrast analyser
- is my text readable enough
- wcag 4.5:1 ratio