Tool

Contraste WCAG

Check the WCAG AA/AAA contrast ratio between two colors. Visualize rendering in real time and find accessible alternatives.

Color 1 (Text / Element)
#3B82F6
#
Color 2 (Background)
#FFFFFF
#
3.68:1
Contrast ratio
Titre principal
Here is a sample of body text to visualize the rendering of this color combination in real conditions.
Secondary text (12px) — often used for captions and metadata.
Accessible alternatives (AA ≥ 4.5)
Common combinations
Noir / Blanc
#000000 / #FFFFFF
21:1 AA ✓
Marine / Blanc
#1E3A8A / #FFFFFF
10.36:1 AA ✓
Vert / Blanc
#15803D / #FFFFFF
5.02:1 AA ✓
Rouge / Blanc
#DC2626 / #FFFFFF
4.83:1 AA ✓
Texte sombre / Crème
#1C1B18 / #F7F5F0
15.81:1 AA ✓
Violet / Blanc
#7C3AED / #FFFFFF
5.7:1 AA ✓
Orange / Noir
#F97316 / #1C1B18
6.14:1 AA ✓
Cyan / Noir
#06B6D4 / #1C1B18
7.09:1 AA ✓

WCAG contrast: why it matters

WCAG (Web Content Accessibility Guidelines) define minimum contrast ratios between text and background. Level AA requires a ratio ≥ 4.5:1 for body text (≥ 3:1 for large headings ≥ 18px or 14px bold). The stricter AAA level requires ≥ 7:1. Insufficient contrast penalizes users with low vision, hurts SEO and may breach legal accessibility requirements (ADA in the US, EN 301 549 in Europe). Always test your text/background pairs before publishing.

Interpreting the contrast ratio

A ratio of 21:1 is the maximum (black on white). A ratio of 1:1 means no contrast (identical colors). For body text, aim for at least 4.5:1. For non-text UI elements (icons, borders, components), reach 3:1 (WCAG criterion 1.4.11). Our tool calculates the ratio using the official WCAG formula based on relative luminance, suggests accessible alternatives and visualizes the actual rendering of the color combination.

How to check contrast

1
Choose two colors
Enter a HEX code or click the color box to open the native picker.
2
Read the ratio
The WCAG ratio is calculated instantly. A score ≥ 4.5:1 validates level AA for body text.
3
Interpret the levels
AA (4.5:1) = recommended standard. AAA (7:1) = optimal level. AA Large (3:1) = text ≥18px bold.
4
Find alternatives
The suggestions below offer variants that pass the AA threshold with your current background.