Color Converter
Convert any color between HEX, RGB, HSL, HWB, OKLCH, Lab, and CMYK, with shades, tints, and color harmonies.
Color Contrast Checker
Check whether your text and background colors meet WCAG AA and AAA contrast requirements, and get passing alternatives. Free, private, and 100% in your browser.
Read as HEX
Read as HEX
Result
Contrast ratio
4.83:1
Good: passes AA
- ✓ Pass
AANormal text
Under 24 px, or under 18.66 px bold · 4.5:1
- ✓ Pass
AALarge text
24 px and up, or 18.66 px bold · 3:1
- ✗ Fail
AAANormal text
Enhanced contrast · 7:1
- ✓ Pass
AAALarge text
Enhanced contrast · 4.5:1
- ✓ Pass
AAUI components & graphics
Icons, input borders, focus rings (1.4.11) · 3:1
APCA Lc 73.6(WCAG 3 draft, informational)
Fine for large or bold text and content you do not read for long
Preview
Large heading text
Bold text at 18.66 px counts as large
Body text at 16 px. The quick brown fox jumps over the lazy dog. Readable contrast helps people with low vision, older users, and everyone reading on a phone in sunlight.
Small print at 12 px is the hardest to read.
Outlined buttonA text link
Closest passing text colors
Same hue and chroma, adjusted lightness (OKLCH), on this background.
- AAA#5359677.00:1
Check Color Contrast for Accessibility
About one in twelve men has some form of color vision deficiency, and many more people read on dim screens or in bright sunlight. Sufficient contrast between text and its background is one of the simplest and most important accessibility requirements, and a common finding in accessibility audits.
Features
Every WCAG criterion
Pass or fail for AA and AAA normal and large text (1.4.3, 1.4.6) and for UI components and graphics (1.4.11).
Fix suggestions
Get the closest text color that passes AA or AAA, keeping your hue, and apply it with one click.
Real preview
See headings, body text, small print, a button, an icon, and a link in your colors.
APCA score
The Lc value from APCA, the contrast method proposed for WCAG 3, with usage guidance.
Transparency handled
Semi-transparent colors are blended the way the browser paints them before the ratio is calculated.
Any color format
Enter HEX, RGB, HSL, OKLCH, or color names, or use the color pickers.
How to Check Color Contrast
- Enter or pick the text color and the background color.
- Read the contrast ratio and the pass or fail result for each WCAG level.
- Check the preview with real text and UI elements.
- If a level fails, click Use on a suggested color that passes.
Frequently Asked Questions
What contrast ratio does WCAG require?
Level AA requires at least 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold) and for UI components and graphics. Level AAA requires 7:1 for normal text and 4.5:1 for large text. Most laws and accessibility policies reference level AA.
How is the contrast ratio calculated?
WCAG computes the relative luminance of both colors (a weighted sum of their linearized red, green, and blue values) and divides the lighter one plus 0.05 by the darker one plus 0.05. Ratios range from 1:1 (same color) to 21:1 (black on white).
Why does 4.48:1 fail when it rounds to 4.5?
WCAG thresholds are exact: a ratio must be at least 4.5, and rounding up is not allowed. This checker never rounds a failing ratio up to a passing one.
What is APCA?
APCA (Accessible Perceptual Contrast Algorithm) is a newer contrast model proposed for WCAG 3. It accounts for text being lighter or darker than the background and for font size and weight. It is shown for information; WCAG 2.x ratios are still the legal standard.
Related Tools
SVG Optimizer
Shrink SVG files by removing Figma, Illustrator, and Inkscape leftovers, rounding numbers, and minifying path data.
JSON Formatter
Beautify, minify, and validate JSON instantly with exact line and column error reporting.
JSON Comparer
Compare two JSON documents side by side and see every added, removed, and changed value.