Check WCAG 2.1 color contrast compliance
Large Text Preview
Normal text preview — The quick brown fox jumps over the lazy dog.
Small text: 14px sample for readability check.
Check color contrast ratios for WCAG 2.1 AA and AAA compliance. Enter foreground and background colors to ensure your design is accessible to people with visual impairments. This tool runs entirely in your browser — no data is sent to any server.
Color contrast is the difference in luminance between text and its background — critical for readability and web accessibility. The Web Content Accessibility Guidelines (WCAG 2.1) define minimum contrast ratios: 4.5:1 for normal text (AA), 3:1 for large text (AA), 7:1 for normal text (AAA), and 4.5:1 for large text (AAA). Poor contrast affects not just visually impaired users but everyone — reading in sunlight, on low-quality displays, or with tired eyes. Many popular websites fail basic contrast checks, particularly with light gray text on white backgrounds or colored text on colored backgrounds. This checker calculates the precise contrast ratio using the WCAG relative luminance formula and immediately shows pass/fail status for all compliance levels.
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). WCAG AAA requires 7:1 for normal and 4.5:1 for large text. AA is the legal minimum in many jurisdictions; AAA is the gold standard.
21:1 (black on white or vice versa). However, maximum contrast isn't always best — pure black text on pure white can cause eye strain for some readers. Dark gray (#333) on white gives 12.6:1, which is excellent and slightly easier on the eyes.
In many countries, yes. The ADA (US), EN 301 549 (EU), and similar laws in Canada, UK, and Australia require digital accessibility. WCAG 2.1 AA is the most common standard referenced in legislation.
Human perception is subjective and adapts to context. The WCAG formula measures luminance mathematically. Colors that look fine on a calibrated monitor may be unreadable on a phone in sunlight or for users with low vision.
WCAG 2.1 requires 3:1 contrast for UI components (buttons, input borders, icons) and graphical objects. This is separate from text contrast and often overlooked — check your borders, icons, and interactive elements too.