Zum Hauptinhalt springen
Tools Star Hub
Entwickler-Tools Kategorie

Farbkontrast-Prüfer

Den WCAG-Kontrast zwischen Vorder- und Hintergrundfarbe prüfen, mit Bestanden/Nicht bestanden für AA und AAA.

Tool wird geladen …

Dieses Tool läuft in Ihrem Browser. Eingaben, Dateien und erzeugte Werte bleiben auf diesem Gerät. Favoriten und zuletzt verwendete Tools speichern – falls Sie sie nutzen – nur Tool-Namen im lokalen Speicher, niemals Passwörter, Dokumente oder QR-Inhalte. Mehr dazu in der Datenschutzerklärung.

Die ausführliche Anleitung zu diesem Tool (Bedienung, Beispiele und FAQ) ist vorerst nur auf Englisch verfügbar.

What this tool does

Compare two solid colors and show the WCAG 2 contrast ratio for normal and large text. Designers checking a button label against its background use it before they ship the pair. Black on white is 21:1, and a photograph behind the text is outside the calculation.

How to use

  1. Pick a foreground color and a background color, or type HEX values.
  2. Read the contrast ratio and the AA/AAA results for normal and large text.
  3. Swap the colors if you need the inverse pair.

Examples

  • Black on white

    The ratio is 21:1, which meets every listed WCAG contrast criterion.

  • Similar greys

    A pair such as #777777 on #999999 fails normal-text AA because the ratio is well below 4.5:1.

How it works

The tool uses WCAG 2 relative luminance. A pass means the pair meets the selected WCAG contrast criterion. Contrast is only one part of accessibility. Font size, weight, spacing and keyboard access still matter. The checker does not claim a design is universally accessible.

Limitations

The result is the WCAG 2 contrast ratio of two colors the parser can read. A pass is not a full accessibility audit. Font size is not read from a stylesheet, and a color the parser rejects produces no ratio.

See the disclaimer for what these tools do not cover.

FAQ

Is the Color Contrast Checker free?
Yes. Checking a foreground and background pair against WCAG contrast ratios is free, with no account.
Does a pass mean my UI is accessible?
No. It only means that color pair meets that contrast threshold. Other requirements still apply.
Which ratios are AA and AAA?
Normal text uses 4.5:1 for AA and 7:1 for AAA. Large text uses 3:1 for AA and 4.5:1 for AAA. The page marks each of those four results separately.
Does a background photo count?
No. The ratio uses the two solid colors you enter. A photograph behind the text, or a translucent layer, is outside the calculation.

Ähnliche Tools