Contrast Checker
Check WCAG 2.1 contrast ratio between two colors.
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
Build palettes and export a full light + dark theme as CSS variables or Tailwind tokens.
Frequently asked questions
Read more
- From one brand colour to a full light and dark theme
How a single hex value becomes a 50-950 shade scale and a complete light and dark token set — and how to export it as CSS variables or Tailwind theme tokens.
- 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