WCAG contrast checker
WCAG 2.x measures legibility as a contrast ratio from 1:1 to 21:1, based on the relative luminance of the two colors. Enter a foreground and a background below, or pick them from your screen first, and you'll see the exact ratio and which success criteria it meets.
Last updated
Pick a color — instant, picks from anywhere on screen (even outside the browser).
Screenshot — when you need to pick from another tab without losing focus.
#171717 rgb(23, 23, 23) hsl(0, 0%, 9%) oklch(22.04% 0.0000 0.0) Recent palette (0)
Click Choose what to capture below. Your browser will show its picker for screens, windows, or tabs.
One quick heads-up
How screen capture works
After you click Continue, your browser will switch focus to the window you're sharing. Press Alt + Tab to come back here — your captured frame will be waiting.
Contrast checker
How to do it
- Pick the text color from your screen with “Pick a color” (or type a HEX value).
- Pick the background color the same way.
- Enter both values in the contrast checker and read the ratio.
- Adjust lightness until you pass: 4.5:1 for normal text at AA, 7:1 at AAA.
Tips and gotchas
- Thresholds (WCAG 2.1): normal text AA 4.5:1, AAA 7:1. Large text (≥24px, or ≥18.66px bold) AA 3:1, AAA 4.5:1. UI components and graphics 3:1 (SC 1.4.11).
- Sample flat fills, not antialiased text edges. Edge pixels blend toward the background and understate contrast.
- Check hover, focus and disabled states too. Those are the states most often flagged in audits.
- Adjusting lightness in OKLCH, which this picker outputs, keeps the hue stable while you nudge contrast.
FAQ
How is the contrast ratio calculated?
(L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker one. Luminance is 0.2126·R + 0.7152·G + 0.0722·B, using linearised sRGB channels.
What about APCA / WCAG 3?
APCA is a proposed newer method and WCAG 3 is still a draft. Legal and procurement requirements still reference WCAG 2.x ratios, which is what this checker computes.
Does transparency affect the result?
Yes. Flatten semi-transparent colors against their actual background first. Sampling the rendered pixel from your screen does that for you.