WCAG Contrast Checker
Check the contrast ratio between text and background colors according to WCAG 2.x. Instantly see if it meets AA or AAA for normal and large text.
Colores a comparar
Relación de contraste
Cumplimiento (WCAG 2.2)
Ejemplo de texto grande
Texto normal de cuerpo con 92% de brillo.
How to use: Contrast
- 1Enter the text color and the background color.
- 2Choose whether the text is normal or large.
- 3Read the contrast ratio and whether it passes WCAG AA and AAA.
What is it for?
- Make sure your site's text is readable for everyone.
- Check buttons and links before shipping a design.
- Meet accessibility requirements on public-sector projects.
Color contrast and accessibility (WCAG)
What the ratio measures
The contrast ratio compares the relative luminance of text and background and ranges from 1:1 (identical) to 21:1 (black on white). The WCAG formula weights the red, green and blue channels according to the sensitivity of the human eye, so two colors that "look different" can still have low contrast.
AA and AAA levels
To meet AA, normal text needs at least 4.5:1 and large text (24 px or more, or 18.66 px bold) 3:1. AAA requires 7:1 and 4.5:1 respectively. Interface components such as input borders or essential icons must reach 3:1 against their surroundings.
Why it matters
Insufficient contrast affects people with low vision or color blindness, but also anyone using a phone in bright sunlight. In many countries web accessibility is also a legal requirement for public bodies and certain private services, with European regulation such as EN 301 549.
How to fix a color
Usually it is enough to darken the text color or lighten the background until you pass the threshold, keeping your brand hue. Do not rely on color alone to convey information (errors in red, for example): add an icon or text that reinforces it.
Related tools
Related articles
Frequently asked questions
What ratio do I need to meet WCAG?+
Normal text needs 4.5:1 (AA) and 7:1 (AAA). Large text (≥18pt or ≥14pt bold) needs 3:1 (AA) and 4.5:1 (AAA).