Contrast Checker
Check WCAG 2.1 contrast ratio between two colors.
Colors
Live sample
Aa Sample Text
The quick brown fox jumps over the lazy dog.
WCAG 2.1 result
Normal text requires 4.5:1 (AA) / 7:1 (AAA). Large text (18pt+/14pt bold+) requires 3:1 (AA) / 4.5:1 (AAA).
About the Contrast Checker
Enter a foreground and background color to compute the WCAG 2.1 contrast ratio, with pass/fail badges for AA and AAA levels at both normal and large text sizes, plus a live text sample.
Examples
Black on white
fg #111827, bg #ffffffOutput
17.5:1 — AAA passKeyboard shortcuts
- Copy the main outputCtrl / ⌘ + Shift + C
- Download the resultCtrl / ⌘ + S
- Share this toolCtrl / ⌘ + Shift + S
- Reset the inputsAlt + R
- Open the tool search paletteCtrl / ⌘ + K
Related tools
Color Blindness Simulator
Color
Simulate how a palette looks with common color vision deficiencies.
Color Converter
Color
Convert colors between HEX, RGB, HSL, HWB, OKLCH and CMYK.
Color Mixer
Color
Blend two colors with a ratio slider and preview CSS blend modes.
Gradient Palette Extractor
Color
Extract and normalize colors from CSS gradients or lists.
Hex to SwiftUI & UIColor Converter
Color
Turn a hex color into SwiftUI, UIKit and asset catalog code.
Palette Generator
Color
Generate complementary, analogous, triadic and other palettes.
Frequently asked questions
Read more
- Color contrast and WCAG: making UI accessible
How WCAG contrast ratios are calculated, which levels apply to which content, and practical fixes for common failures.
- Web accessibility quick wins for developers
High-impact, low-effort accessibility fixes — semantic HTML, focus states, color contrast and ARIA done right — that don't require a redesign.
Version 1.0.0 · Updated 2026-08-06 · Runs entirely in your browser