Color & Accessibility Toolkit

Local only

Check WCAG contrast, repair color pairs, build palettes, and extract image colors locally.

Foreground color

Background color

WCAG contrast ratio

14.68:1

Normal text · AAPass

Normal text · AAAPass

Large text · AAPass

Large text · AAAPass

UI components · AAPass

WCAG 2.2 requires at least 4.5:1 for normal text, 3:1 for large text and non-text UI components, and 7:1 for enhanced normal-text contrast.

Live preview

Design that more people can read

Contrast is only one part of accessibility, but it is a measurable place to start. Review headings, paragraphs, controls, and focus states together.

These suggestions preserve hue direction where possible, then move toward black or white until the requested contrast is reached.

01
Enter a color pair
Paste HEX or RGB foreground and background colors and see the exact contrast ratio update immediately.
02
Check or explore
Review WCAG 2.2 AA/AAA outcomes, generate harmonious palettes, simulate common color-vision deficiencies, or extract image colors.
03
Apply accessible colors
Use the closest AA or AAA foreground suggestion, copy color values, or export the palette as CSS variables.

Which standard does the contrast checker use?

It uses the normative WCAG 2.2 relative-luminance contrast formula and the 3:1, 4.5:1, and 7:1 thresholds.

Does passing contrast guarantee accessibility?

No. Contrast is one requirement. Typography, focus states, semantics, motion, language, and testing with assistive technology still matter.

Are uploaded images private?

Yes. Color extraction uses a temporary browser canvas and does not upload the image.

Is the color-vision preview diagnostic?

No. It is a practical simulation for design review, not a medical diagnosis or a substitute for user testing.

Keep working with other focused browser utilities.