Color Contrast Checker
NewCheck WCAG 2.1 AA/AAA color contrast ratios for foreground and background pairs.
Normal text (16px) — The quick brown fox jumps over the lazy dog.
Large text (18px bold) — WebdevToolbox
Small text (14px) — Lorem ipsum dolor sit amet, consectetur adipiscing elit.
WCAG Compliance
WCAG 2.1 Requirements
Frequently Asked Questions
Does this use the real WCAG contrast formula or just compare colors visually?
It computes relative luminance from the two hex colors, then calculates the contrast ratio and checks it against WCAG AA and AAA thresholds for normal and large text.
Why do I get N/A instead of a contrast ratio?
One of the inputs is not valid hex. The checker only parses 3-digit and 6-digit hex values; invalid input resets the ratio and compliance badges to N/A.
Why can a displayed 4.5:1 still fail AA?
The displayed number is rounded to two decimals, but pass/fail is based on the unrounded ratio. That matches WCAG guidance to treat 4.5:1 and 3:1 as exact thresholds.
Does it account for text size?
It does not ask for your actual font size. Instead, it always shows both normal-text and large-text pass/fail results side by side using the WCAG thresholds for each.
Can I test colors by typing hex codes instead of using the picker?
Yes. The text fields update the result live as you type, and the swap button simply flips the current foreground and background values and recalculates.
Related Tools
ARIA Cheatsheet
NewAccessibility reference — ARIA roles, states, properties, and common accessible patterns.
Color Information
NewGet complete color info: HEX, RGB, HSL, HSV, CMYK, and color harmonies.
HTML Validator
NewValidate HTML structure for common errors, missing attributes, and accessibility issues.