Color Contrast Checker

Check color contrast ratios for WCAG 2.1 compliance. Enter foreground and background colors to instantly see AA/AAA pass/fail results for normal and large text.

Presets:
#
#

Der schnelle braune Fuchs springt über den faulen Hund

Normaler Fließtext bei 16px zum Testen der Lesbarkeit.

Kleiner Text bei 14px — schwieriger zu lesen bei niedrigem Kontrast.

Kontrastverhältnis

AA Normaler Text

Mindestens 4,5:1

Bestanden Nicht bestanden

AA Großer Text

Mindestens 3:1

Bestanden Nicht bestanden

AAA Normaler Text

Mindestens 7:1

Bestanden Nicht bestanden

AAA Großer Text

Mindestens 4,5:1

Bestanden Nicht bestanden

How to Use

1

Pick your colors

Enter foreground and background colors using hex codes or the color picker.

2

View contrast ratio

See the calculated contrast ratio instantly as you type or select colors.

3

Check compliance

Review WCAG AA and AAA pass/fail results for both normal and large text.

Häufig gestellte Fragen

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. Most accessibility laws reference AA as the minimum standard, while AAA is recommended for critical content like government and healthcare websites.
WCAG defines large text as at least 18 points (24px) for regular weight or 14 points (approximately 18.66px) for bold weight. Large text has a lower contrast requirement because bigger characters are inherently easier to read. This distinction matters when designing headings versus body copy.
To improve contrast, darken your text color or lighten your background (or vice versa). Increase the lightness difference between foreground and background in HSL. As a rule of thumb, ensure at least 50% lightness difference. You can also try using a darker shade from the same color family — for example, switching from blue-400 to blue-700 against a white background.
A ratio of 4.5:1 or higher meets WCAG AA for normal text and works well for most users. For optimal readability, aim for 7:1 or above. Pure black (#000000) on white (#FFFFFF) gives the maximum 21:1 ratio. Studies show that extremely high contrast like pure black on pure white can cause eye strain for some users — a slightly off-white background (#F8F8F8) or dark gray text (#1A1A1A) provides excellent readability with less harshness.
Yes. You must test contrast ratios separately for both light and dark modes because the foreground-background relationship changes. A color pairing that passes AA in light mode may fail in dark mode. Additionally, light text on dark backgrounds can appear brighter than expected due to the irradiation illusion — consider using slightly thinner font weights or slightly muted text colors in dark mode.

About WCAG Color Contrast

The WCAG color contrast guidelines were developed by the World Wide Web Consortium (W3C) as part of the Web Content Accessibility Guidelines. First published in 1999, WCAG has evolved through versions 1.0, 2.0, 2.1, and 2.2, with each iteration refining accessibility standards for web content.

The contrast ratio formula is based on relative luminance calculations from the sRGB color space. Each color channel is converted from gamma-corrected sRGB to linear light, then combined using the standard luminance coefficients: 0.2126 for red, 0.7152 for green, and 0.0722 for blue. The contrast ratio is computed as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance.

Section 508 of the US Rehabilitation Act and the European Accessibility Act both reference WCAG criteria. Meeting WCAG AA is typically the minimum legal requirement, while AAA represents the highest level of accessibility conformance.

Ähnliche Artikel

Tutorials

CSS light-dark()-Funktion: Natives Theme-Switching

Dez 11, 2025
Tutorials

Entwurf einer Farb-API: REST-Endpunkte für Farbdaten

Dez 01, 2025
Farbfragen

Ist Schwarz eine Farbe? Die Antwort aus Wissenschaft und Design

Nov 15, 2025