WCAG Contrast Checker
Check if your text and background color combination meets AA and AAA accessibility levels.
How to check the contrast of two colors
Choose text and background color
Enter HEX codes or use visual selectors for both colors.
Check the contrast ratio
You'll see the calculated ratio instantly along with a preview of the text on your chosen background.
Check if it meets WCAG AA or AAA
The tool indicates whether the combination is suitable for normal text and large text at each level.
Frequently asked questions about color contrast
Good contrast between text and background is essential so anyone can read your content, including people with low vision. PDFDocks calculates the exact ratio according to the WCAG standard.
What do AA and AAA mean?
+
These are the two conformance levels of the WCAG accessibility guidelines: AA is the recommended minimum and AAA is the most demanding level.
What contrast ratio do I need?
+
For normal text, a minimum of 4.5:1 (AA) or 7:1 (AAA) is recommended; for large text, 3:1 (AA) or 4.5:1 (AAA).
Why is contrast important?
+
Insufficient contrast makes reading difficult, especially for people with low vision or on screens with high ambient light.
Do I need to install any program?
+
No, you don't need to install anything. It works directly from your browser.
Is it free?
+
Yes, this tool is completely free.
Does it work for reviewing an entire website design?
+
It works for checking specific color combinations; to audit a complete website, you'll need to review each text and background combination you use.
Colors
Color Converter (HEX, RGB, HSL, CMYK)
Convert any color between HEX, RGB, HSL, and CMYK instantly, with live preview and the closest color name.
Color Palette Generator
Create harmonious 5-color palettes (complementary, analogous, triadic, or monochromatic) from a base color.
CSS Gradient Generator
Create linear or radial gradients with up to 4 colors and copy the ready-to-use CSS code.
Random Color
Generate a random color with one click and discover its name, HEX/RGB/HSL codes, and similar colors.
Color Picker (eyedropper)
Pick any color from your screen using the browser's eyedropper tool, or use the classic color picker.
Color Blindness Simulator
Upload an image and see how people with protanopia, deuteranopia, or tritanopia would perceive it.
Mesh Gradient Generator
Create backgrounds with mesh gradients (blurred color patches) and download them as PNG or copy the CSS code.
Shades and Tints Generator
Automatically generate the lightest tints and darkest shades of any color, with its HEX code.
Color Mixer
Mix two colors and discover the intermediate tones step by step, with their HEX code.
Color Wheel (Harmonies)
Choose a color on the wheel and discover its harmonious combinations: complementary, analogous, triadic, and more.
Image Palette Extractor
Upload an image and automatically extract its dominant colors into a palette, with the HEX code for each one.
Average Color of an Image
Upload an image and instantly calculate its average color, with HEX, RGB and HSL codes.
Explore colors by family
More than 469 named colors, with their HEX, RGB, HSL and CMYK codes, organized into 12 color families.
