About the Handiwork Color Contrast Checker
The Color Contrast Checker measures the contrast ratio between a text color and its background and tells you whether it meets WCAG accessibility standards. Enter two colors as hex or RGB to see the exact ratio, a live preview, and pass/fail results for AA and AAA at normal and large text sizes — all calculated in your browser.
How to use the Handiwork Color Contrast Checker
- Enter a foreground (text) color and a background color.
- Read the contrast ratio and the live text preview.
- Check which WCAG levels — AA, AAA, normal, large — pass or fail.
What the contrast ratio means
Contrast ratio compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white). WCAG 2.2 requires at least 4.5:1 for normal body text and 3:1 for large text to meet level AA, with stricter thresholds of 7:1 and 4.5:1 for level AAA.
Normal text vs. large text
WCAG defines large text as at least 18.66px bold or 24px regular. Because larger letterforms are easier to read, they are held to a lower contrast requirement. Non-text elements like icons, form borders, and focus indicators have their own 3:1 minimum under the UI components rule.
How the ratio is actually calculated
Each color is converted to relative luminance using the WCAG formula — a weighted sum of its red, green, and blue channels (0.2126R + 0.7152G + 0.0722B, after each channel is linearized) that models how the human eye perceives brightness differently across colors. The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color’s luminance and L2 is the darker one’s, producing the familiar range from 1:1 up to 21:1.
Reading the pass/fail results
The tool checks your ratio against all four thresholds at once — AA normal (4.5:1), AA large (3:1), AAA normal (7:1), and AAA large (4.5:1) — so you can see immediately which levels a color pairing satisfies. Meeting AAA automatically means AA is satisfied too, since every AAA threshold is equal to or stricter than its AA counterpart.
Assumptions and limitations
- A passing ratio does not guarantee that a design is accessible. Font weight, size, state changes, focus visibility, motion, and user testing still matter.
- The checker evaluates two opaque sRGB colors. Transparency, gradients, images, filters, and compositing must be tested against the final rendered background.
- WCAG defines large text by rendered size and weight. Confirm your CSS output rather than relying only on a design-file label.
Sources and standards
These authoritative references were used to verify the method and guidance on this page.
Frequently asked questions
What contrast ratio do I need to pass WCAG AA?
At least 4.5:1 for normal text and 3:1 for large text. For the stricter AAA level, you need 7:1 for normal text and 4.5:1 for large text.
What color formats can I enter?
You can enter colors as hex (#1a2b3c or #abc) or as rgb(r, g, b). The checker converts them and computes the ratio automatically.
Does contrast apply to icons and borders too?
Yes. Meaningful non-text elements such as icons, input borders, and focus indicators should meet a 3:1 ratio against adjacent colors under WCAG’s UI components requirement.
If a pair passes AAA, does it also pass AA?
Yes. AAA’s thresholds (7:1 normal text, 4.5:1 large text) are always equal to or stricter than AA’s (4.5:1 and 3:1), so meeting AAA automatically satisfies AA at the same text size.