Contrast Checker
Check text and background colours against WCAG 2.2 and APCA, with see-through colours and fixes that pass.
Large text at 24 px
Bold text at 18.66 px
Normal text at 16 px. Pack my box with five dozen liquor jugs, and check that every word stays easy to read.
Small print at 13 px, the kind used for captions and footnotes.
WCAG 2.2
APCA
Check a screenshot
Drop a screenshot, then click the text and the background to check them.
About this tool
Check a text colour against a background with the WCAG 2.2 contrast ratio: 4.5:1 for normal text and 3:1 for large text at level AA, 7:1 and 4.5:1 at AAA, and 3:1 for icons, borders of controls and focus indicators. Each result names the success criterion it was checked against.
Ratios are computed exactly and rounded down for display, so a pair at 4.499:1 shows as 4.49:1 and fails, as it should, instead of reading as a pass. See-through colours are blended the way browsers draw them: the text over the background, and the background over whatever sits behind it, with the range from white to black shown when the background is translucent.
When a pair falls short, you get the nearest darker and lighter versions of the text or background that meet your target, changing only lightness so the colour keeps its hue. APCA, the method proposed for WCAG 3, is shown alongside with its guidance for text sizes. Drop a screenshot to pick both colours straight from your design.
What counts as large text?
WCAG defines large text as at least 18 point or 14 point bold. In CSS pixels that’s 24 px, or 18.66 px when bold.
Should I use WCAG 2.2 or APCA?
WCAG 2.2 is the standard that laws and procurement rules refer to, so meet it first. APCA models perception more closely, especially for light text on dark backgrounds, and is useful as a second opinion while WCAG 3 is developed.
Does a passing pair make my site accessible?
No. Contrast between two colours is one requirement among many, and real contrast also depends on font weight, anti-aliasing and anything drawn behind the text.