Color Accessibility
Contrast, vision & inclusion
Color · LEARN
Roughly one in twelve men and one in two hundred women has some form of color-vision deficiency, and far more read on screens in bright sun, at small sizes, or with low vision. Accessible color means two things: enough contrast between text and its background, and never carrying meaning by color alone — the error state needs an icon or label, not just a red tint.
The Web Content Accessibility Guidelines (WCAG) set the numbers: 4.5:1 contrast for normal text and 3:1 for large text, at minimum. You do not need to memorize ratios — run every pairing through a contrast checker before it ships. The tools below are free, online, and take seconds.
The contrast checkers
WebAIM Contrast Checker
Visit site ↗The industry standard. Enter a foreground and background color and it instantly shows the contrast ratio with pass/fail against every WCAG level — normal text, large text, and UI components.
Contrast Ratio (by Lea Verou)
Visit site ↗A beautifully minimal single-purpose checker: type or paste any color, drag the background, and watch the ratio update live. Great for quick explorations while building a palette.
Adobe Color Contrast Analyzer
Visit site ↗Built into Adobe's free color tool. Checks text and non-text (graphic) contrast separately and suggests darker or lighter corrections that still pass.
Stark Contrast Checker
Visit site ↗The web version of the popular Figma and Sketch plugin. Checks contrast, simulates color blindness, and integrates directly into design files so checks happen where you work.
Coblis Color Blindness Simulator
Visit site ↗Upload an image or design and see it through eight types of color-vision deficiency. The fastest way to answer 'can everyone actually read this chart?'
Tanaguru Contrast Finder
Visit site ↗When a pairing fails, this tool suggests the nearest colors that pass — nudging lightness just enough to hit the required ratio without losing the palette.