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.1 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.
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.