Why contrast ratio matters for accessibility, SEO, and brand trust
Search engines increasingly reward pages that work well for real users, and readable text is a core part of that story. Accessible color contrast helps people with low vision, color deficiency, or glare on mobile screens actually use your interface. Teams also search for WCAG AA contrast and WCAG AAA contrast when they need procurement or legal alignment, or when they ship design systems with documented tokens. This page uses the same sRGB luminance steps defined in the Web Content Accessibility Guidelines so your numbers line up with audits and browser tools.
Designers often pair a primary brand color with neutrals; developers implement those as CSS variables. Before merging, run each heading and body pair through a contrast checker. For gradients and hero images, test the lightest and darkest regions behind copy. When you need lighter or darker steps from one hue, the tint and shade generator builds a predictable scale; bring those HEX codes back here to confirm ratios.
How to use this WCAG contrast checker (step by step)
- Set text (foreground) and background colors using the pickers or by typing HEX (three or six-digit forms such as #f4f4f5 or #abc). Press Enter or blur the field to apply.
- Read the live preview and the contrast ratio (for example 7.12:1). Rows below show whether you meet AA and AAA for normal and large text, with minimum thresholds shown.
- Use Swap colors if you pasted the pair reversed. Use the copy icon beside each HEX field or Copy contrast ratio to paste values into Figma variables, CSS, or tickets.
- Optional: click Upload image (upload icon) or drag a mockup into the dashed area. Choose whether clicks apply to the text or background color, then click the image canvas to sample a pixel.
Normal text vs large text thresholds (quick reference)
For standard body copy and most UI labels, aim for at least 4.5:1 for WCAG AA and 7:1 for AAA. For large text (approximately 18pt regular or 14pt bold and larger), AA allows 3:1 and AAA allows 4.5:1. Icons and thin strokes that act as text still need sufficient separation from adjacent colors—when in doubt, measure the worst neighboring pair.
Gradients, shadows, and dark mode
This tool measures two solid sRGB colors. For linear and radial gradients, test the stops behind your text. The gradient generator and CSS gradient generator help you iterate visually; export HEX stops and verify them here. For dark mode, repeat checks because swapped surfaces change both luminance and perceived hue.
Related design and color tools
Explore the full design and color tools section. Highlights:
- Color Picker & Converter — Pick colors and copy HEX, RGB, HSL, and CMYK values for design systems and handoff.
- Color Palette Generator — From one base hue, build complementary, triadic, analogous, and monochrome palettes.
- Gradient Generator — Design linear and radial gradients visually and copy production-ready CSS in seconds.
- Tint & Shade Generator — Generate lighter tints and darker shades from a brand color for consistent UI scales.
- Color Blindness Simulator — Preview images or palettes under common color-vision deficiencies to validate inclusive design.
- Box Shadow Generator — Tune offset, blur, spread, color, and inset shadows with live preview and copyable CSS.
- Border Radius Generator — Adjust each corner visually and export shorthand border-radius for cards and buttons.
- CSS Gradient Generator — Build multi-stop gradients with angles and stops—outputs clean, modern CSS gradients.
- Flexbox Playground — Tweak flex container and item properties and see layout updates in real time.
- CSS Grid Playground — Prototype grid templates, gaps, and placement with instant visual feedback.
- Favicon Generator — Create favicon.ico and PNG sizes from an image or text for every device and browser tab.
If you are tuning shadows and depth, the box shadow generator complements flat color checks—still verify any text sitting on tinted surfaces.