Enter two solid colors
Choose a foreground and background using HEX codes or the color pickers.
WCAG Color Contrast Checker for Text and Background Ratios
Check text and background color contrast against WCAG AA and AAA ratios. Preview normal and large text, swap colors, and copy your results.
Free to use. No signup or watermark.Text and background preview
A clear idea starts with readable words.
Check text and background color contrast
Use opaque HEX colors. For a gradient or photo, test the background color directly behind the text.
Contrast ratio21.00:1
Your preview uses large text: AA passes, AAA passes.
Normal text, AAPassRequires 4.5:1
Normal text, AAAPassRequires 7:1
Large text, AAPassRequires 3:1
Large text, AAAPassRequires 4.5:1
Large text means at least 24px regular or 18.67px bold. Pass/fail uses the unrounded ratio; the displayed ratio is rounded to two decimal places.
Based on WCAG 2.2 minimum contrast and enhanced contrast. This checks a pair of solid colors, rather than auditing a whole page.
AA and AAA color contrast checks for normal and large text
Check whether a text color is readable against a solid background before using it in an image, presentation, or website. This checker calculates relative luminance from sRGB colors and compares the unrounded ratio with WCAG AA and AAA thresholds. Preview sample text, adjust both colors, and copy a result for your design notes. A color-ratio check covers one part of accessibility; it does not assess an entire page or guarantee readability over a photograph or gradient. Use this text and background contrast checker for two solid colors; a single ratio cannot establish readability across every point of a gradient or photograph.
Ways to use the contrast checker
Choose readable text for a plain-color image or banner.
Compare foreground and background colors for website text.
Document AA and AAA contrast results for a design handoff.
How to check WCAG AA and AAA text color contrast
The checker compares two opaque sRGB colors. Its ratio is one part of evaluating readable text; it does not audit an entire page or every background.
Enter text and background colors as separate HEX values
Use the text color as the foreground and the surface behind it as the background. Swapping the colors leaves the ratio unchanged, though the visual design changes. Pure black against white gives 21:1; identical colors give 1:1, useful reference cases when checking your inputs.
Use the correct text-size threshold
Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text needs 3:1 and 4.5:1 respectively. This tool treats 24 CSS pixels at normal weight, or about 18.67 pixels at bold weight, as large text. Rounded displayed ratios do not change the underlying pass calculation.
Check the real background
For a photo, gradient, or translucent layer, determine the actual background beneath the letters and check relevant areas. A single solid-color pair cannot establish that every position passes. The preview can demonstrate a poor pair intentionally; revise the colors and then review the finished layout, including hover and focus states.
Need help choosing a file? Read the image format guide or compare common pixel dimensions.
How to use the free contrast checker tool
Read AA and AAA results
Compare the calculated ratio with the thresholds for normal and large text. Try the text preview.
Adjust and reuse
Change or swap colors to improve contrast, then copy the colors, CSS, or result for your project.
Contrast Checker: questions & answers
Everything you need before your next download.
What contrast ratio does normal text need?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Results are judged using the full ratio before display rounding.
What counts as large text for the contrast test?
WCAG defines large text as at least 18 points (24 CSS pixels), or 14 points (about 18.67 CSS pixels) when bold. Other font characteristics still affect practical readability.
Can this check a gradient or a photo background?
It compares two opaque solid colors. A gradient or photo can vary behind each letter, so test the least contrasting area or add a solid panel behind the text.
Start your next creation with a simple image
Set the mood for a social post, refresh your wallpaper, or give a presentation a clean opening. Pick a canvas and make it yours.
Set the scene for your next post
Start with a 1080 × 1080 post or a 1080 × 1920 story. Pick colors that feel like you, download your background, then add photos and text in your usual editor.
Put your favorite colors on your screen
A soft sunset gradient or a quiet wash of color can make a screen feel like yours. Choose a 4K desktop canvas or a portrait phone size, then build a wallpaper around your own palette.
Give your next presentation a clean opening
Leave room for your ideas with a white canvas, or set the tone with a simple gradient. Start at 1920 × 1080, then add your title in a slide app or use the background for a project cover.