Color Contrast Checker
Check WCAG 2.1 color contrast ratios between any two colors for accessibility compliance — with AA and AAA pass/fail results and a live preview. Ini berjalan sepenuhnya di browser Anda — tidak ada data yang dikirim ke server mana pun, tidak perlu akun, dan sepenuhnya gratis.
The Complete Guide to Color Contrast and Web Accessibility
Web accessibility is no longer optional. With an estimated 300 million people globally living with color blindness or low vision, designing digital interfaces with proper color contrast is both an ethical responsibility and, increasingly, a legal requirement. Our free Color Contrast Checker instantly evaluates your foreground and background colors against official WCAG (Web Content Accessibility Guidelines) standards to ensure your website is readable for everyone.
What is WCAG?
The Web Content Accessibility Guidelines (WCAG) are a set of standards created by the World Wide Web Consortium (W3C). They define how to make web content more accessible to people with disabilities. The guidelines define three levels of conformance: A (minimum), AA (standard), and AAA (maximum/enhanced).
Most accessibility laws (such as the ADA in the US, or the EN 301 549 in Europe) require websites to meet WCAG 2.1 Level AA standards.
Understanding Contrast Ratios
A contrast ratio is a mathematical measurement of the difference in relative luminance (brightness) between two colors. It is expressed as a ratio ranging from 1:1 (white on white, completely illegible) to 21:1 (black on white, maximum contrast).
WCAG AA Requirements
- Normal Text (less than 18px / 14pt): Must have a minimum contrast ratio of 4.5:1.
- Large Text (18px or 14px bold): Because larger text is easier to read, the requirement drops to 3.0:1.
- UI Components and Graphics: Form inputs, buttons, and essential icons must have a contrast ratio of at least 3.0:1 against adjacent colors.
WCAG AAA Requirements
If you are designing for government portals or specialized applications for visually impaired users, you should aim for Level AAA:
- Normal Text: Requires a 7.0:1 contrast ratio.
- Large Text: Requires a 4.5:1 contrast ratio.
Common Color Contrast Mistakes
Even experienced designers frequently fail contrast checks with these common patterns:
- Light Gray Text on White: While popular in minimalist and "clean" designs, secondary text often falls well below the 4.5:1 requirement, making it invisible to older users.
- White Text on Colored Buttons: Bright primary colors (like bright orange or light blue) often do not have enough contrast with white text. You may need to darken your brand color slightly for web use.
- Placeholders as Labels: Using light gray placeholder text inside form fields instead of real labels fails contrast checks and causes usability issues.
Use our free Color Contrast tool during your design phase to catch accessibility issues early. If you need to generate WCAG-compliant color schemes, use our Color Palette Generator or convert your colors using our Color Converter.
Cara Menggunakan Color Contrast Checker
- 1
Choose Your Colors
Use the color pickers or type a hex code to set your foreground (text) color and background color.
- 2
Read the Contrast Ratio
The contrast ratio is calculated instantly. A ratio of 4.5:1 or higher passes WCAG AA for normal text.
- 3
Check the WCAG Results
See pass/fail results for Normal Text AA, Normal Text AAA, Large Text AA, Large Text AAA, and UI Components.
- 4
Preview Your Text
The live preview panel shows exactly how your text will look against your chosen background.
Pertanyaan yang Sering Diajukan
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable for users with visual impairments, including color blindness. The guidelines are published by the W3C and are a legal requirement in many countries.
What contrast ratio do I need for WCAG AA?
Normal text (under 18px or under 14px bold) requires a contrast ratio of at least 4.5:1 for WCAG AA. Large text (18px+ or 14px+ bold) only requires 3:1. For WCAG AAA (the highest level), ratios of 7:1 and 4.5:1 are required respectively.
What does AAA vs AA mean?
AA is the standard compliance level required by most accessibility laws. AAA is the enhanced level — it is more strict and often used for government sites, medical platforms, or any site where maximum accessibility is a priority.
What is a good contrast ratio for UI components?
Buttons, form inputs, icons, and other UI components that convey information need a minimum 3:1 contrast ratio against their adjacent colors, as per WCAG 2.1 Success Criterion 1.4.11.
Does this tool work for background images?
This tool calculates contrast between two solid colors. For background images, you need to consider the darkest and lightest parts of the image separately. It is generally best practice to add a solid color overlay behind text on image backgrounds.