Sample heading text
This is how your body text will look with these colors.
Small caption text, like a footnote or helper line.
Contrast ratio
--
AA Normal
needs 4.5:1
--
AA Large
needs 3:1
--
AAA Normal
needs 7:1
--
AAA Large
needs 4.5:1
--
Calculated with the official WCAG relative luminance formula. Large text means 18pt and up, or 14pt and up bold.
Frequently asked questions
What contrast ratio do I need to pass WCAG AA?
Normal text needs at least 4.5:1 and large text needs at least 3:1. AAA is stricter: 7:1 for normal text and 4.5:1 for large text. Most accessibility laws reference the AA level.
What counts as large text?
Text that is 18pt or larger, or 14pt or larger when bold. Everything smaller is normal text and must meet the higher 4.5:1 bar at AA level.
How is the contrast ratio calculated?
With the official WCAG formula: each color gets a relative luminance from its red, green and blue channels, and the ratio is (lighter + 0.05) divided by (darker + 0.05). The result ranges from 1:1 to 21:1.
Preview
Related free tools
Free CSS Button Generator | Style Buttons Online
Free CSS button generator. Customize colors, padding, and radius with live preview, then c
Free HEX RGB HSL Color Converter
Free color converter. Convert between HEX, RGB and HSL instantly, preview the color and co
Free CSS Gradient Generator | Create Gradients Online
Free CSS gradient generator. Pick colors, adjust direction and stops, preview live, and co