Contrast Checker
Check WCAG color contrast ratio for accessibility compliance
Related Tools
Color Picker
Pick colors and convert between HEX, RGB, HSL
Try nowHEX to RGB Converter
Convert colors between HEX, RGB, HSL and CMYK formats
Try nowColor Format Converter
Convert colors between HEX, RGB, HSL, HWB, and CMYK formats. Visual color picker included.
Try nowGradient Generator
Create beautiful CSS gradients with a visual editor
Try nowWCAG Contrast Checker - Color Accessibility Tool | Tuttilo
Our WCAG Contrast Checker helps you verify that your text colors meet accessibility standards. Enter foreground and background colors to instantly see the contrast ratio and whether your combination passes WCAG 2.1 Level AA and AAA requirements for both normal and large text.
Select your foreground (text) color and background color using the color pickers or by entering hex codes directly. The tool immediately calculates the WCAG contrast ratio and displays pass/fail results for four different criteria: Level AA normal text (4.5:1), Level AA large text (3:1), Level AAA normal text (7:1), and Level AAA large text (4.5:1). Large text means 18pt and above, or 14pt and above when bold. All calculations use the official WCAG 2.1 formula and run entirely in your browser for instant feedback.
Web developers ensure their site text meets legal accessibility requirements before launching, avoiding potential lawsuits under ADA or Section 508 regulations. UI designers verify that call-to-action buttons have sufficient contrast against page backgrounds so users with low vision can easily identify interactive elements. Mobile app developers test whether their light mode and dark mode color schemes both pass AA standards for users in different lighting conditions. Government agencies building public-facing websites must meet AAA standards in many jurisdictions, requiring careful color selection validated through contrast checking.
Always aim for Level AA compliance at minimum β many countries legally require it for government and commercial websites. Level AAA provides better accessibility but can be challenging with brand colors; prioritize it for body text while AA may suffice for decorative elements. Remember that contrast requirements differ for large text (18pt+ regular or 14pt+ bold) versus normal text. Contrast ratios apply to all text-on-background scenarios including text over images, so test overlay combinations carefully. When using light text on colored backgrounds, pure white often works better than off-white since every step away from white reduces contrast.
All processing happens directly in your browser. Your files never leave your device β no server uploads, no cloud storage, no data retention. The tool works offline once loaded, requires no registration, and is completely free with no usage limits.
Frequently Asked Questions
What is WCAG contrast ratio?
WCAG contrast ratio measures the relative luminance between foreground and background colors, on a scale from 1:1 (no contrast) to 21:1 (maximum contrast, black on white). Higher ratios mean better readability.
What are the WCAG AA and AAA requirements?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+). WCAG AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text.
Why does color contrast matter for accessibility?
Many people have visual impairments including low vision, color blindness, or age-related vision loss. Sufficient contrast ensures that text content is readable by the widest possible audience, which is both a usability best practice and often a legal requirement.
How do I fix a failing contrast ratio?
Make the foreground darker or the background lighter (or vice versa). You can use our tool to experiment with different color combinations until you find one that passes the required WCAG level while maintaining your design aesthetics.
Does this tool support alpha transparency?
The current version works with opaque (solid) HEX colors. For transparent colors, the effective contrast depends on underlying layers. Test with the final rendered color for accurate results.