WCAG Color Contrast Checker

About Contrast Checker

The WCAG contrast ratio between two colours, from 1:1 for identical colours to 21:1 for black on white, with pass or fail against the standard thresholds: 4.5:1 for body text, 3:1 for large text and user interface components, and 7:1 for the stricter AAA level.

Contrast is the accessibility requirement that affects the most people — anyone with low vision, anyone on a phone in sunlight, anyone using a cheap monitor. It is also the easiest to check and to fix, which is why it is rarely a defensible thing to skip.

Where it helps

• Gives the actual ratio, not just a pass or fail badge.
• Covers the AA and AAA thresholds for both normal and large text.
• A live preview shows the pairing rather than only scoring it.
• Instant and local, so it fits inside a design iteration.

Limits

• The WCAG 2 formula is known to be imperfect, particularly for light text on dark backgrounds — it can pass pairings that read poorly.
• It checks two flat colours: text over an image, a gradient or a translucent overlay needs the effective background.
• Non-text contrast rules for icons, borders and focus indicators have their own requirements.
• Passing the ratio is not the same as being readable — font weight and size matter too.

Frequently asked questions

What ratio do I need?

4.5:1 for normal body text, 3:1 for text at 18pt or 14pt bold and above, and 3:1 for interface components and focus indicators.

What counts as large text?

24 CSS pixels and above, or 18.66 pixels and above when bold.

My text sits on a photograph. How do I check it?

Sample the lightest and darkest areas behind the text and check both. A scrim or solid overlay is usually the fix.

Should I aim for AAA?

It is a worthwhile target for body copy in content-heavy interfaces. AA is the level most legislation actually requires.

Related tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Palette Generator — Harmonious colour schemes from a base colour
• Gradient Generator — Build linear, radial and conic CSS gradients
• CSS Formatter — Format stylesheets with consistent indentation
• Image Colour Picker — Pick a colour out of a picture and read it back
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose

More Colors & Design tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Image Colour Picker — Pick a colour out of a picture and read it back
• Gradient Generator — Build linear, radial and conic CSS gradients
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose
• Palette Generator — Harmonious colour schemes from a base colour
• Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
• Border Radius Generator — Round corners evenly, one by one, or into a blob
• CSS Animation Generator — Build a keyframe animation and watch it run
• Cubic Bezier Editor — Plot an easing curve and feel what it does
• Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
• Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
• Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
• Color Blindness Simulator — See a palette as people with each colour-vision deficiency do, and find the pairs that clash
• Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
• Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
• Text Shadow Generator — Soft, glow, neon, outline and retro text shadows with a live preview
• Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
• Clip Path Generator — Cut elements into triangles, hexagons, stars, arrows or your own polygon
• CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
• Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
• Web Font Previewer — Set your own text in a font file before you ship it