Test text and background colors against WCAG 2.x contrast requirements. Enter HEX values or choose colors below.
Contrast ratio
Higher ratios mean greater luminance contrast. The maximum is 21:1.
Live preview
Accessible web design
This is a preview of normal-sized text using your selected foreground and background colors. Good contrast helps people read your content.
The sample button uses inverted colors. The checker does not assess every visual state, border, or focus indicator.
Accessible color suggestions (OKLCH)
Keep your background and choose a suggested foreground color that meets the selected target. Suggestions adjust perceptual lightness while preserving hue and as much chroma as possible. The closest perceptual match appears first.
What contrast ratio do I need?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 and 4.5:1, respectively. Non-text UI components and essential graphical objects generally require at least 3:1 against adjacent colors under WCAG 1.4.11.
Large text is at least 24 CSS pixels at normal weight, or approximately 18.66 CSS pixels in bold. Contrast alone does not guarantee full accessibility compliance.
This tool uses the WCAG 2.x relative luminance calculation, including the 0.04045 sRGB conversion threshold. Suggestions use OKLCH with sRGB gamut mapping. Fully opaque six-digit and three-digit HEX colors are supported.
Why Is Color Contrast Important in Web Design?
Color contrast plays an important role in making websites readable, accessible, and easy to use. When there isn't enough contrast between text and its background, visitors may struggle to read the content, especially those with low vision, color vision deficiencies, or age-related vision changes. Even people with normal vision can have difficulty reading low-contrast text when using a mobile device outdoors or viewing a screen in bright sunlight. Choosing colors that provide sufficient contrast helps ensure that important information, navigation menus, buttons, and other website elements are easy to see and understand.
Good color contrast is also an essential part of accessible web design. A website may look attractive, but if visitors cannot comfortably read its content or identify important buttons and links, its design isn't serving everyone effectively. By following the Web Content Accessibility Guidelines (WCAG), web designers can create websites that are both visually appealing and accessible to a wider audience. Checking color combinations before publishing a website is a simple step that can improve usability, reduce frustration, and help meet established accessibility standards.
What Are the Web Content Accessibility Guidelines (WCAG)?
The **Web Content Accessibility Guidelines (WCAG)** are internationally recognized standards designed to make websites and digital content more accessible to everyone, including people with visual, hearing, physical, and cognitive disabilities. Developed by the World Wide Web Consortium (W3C), these guidelines help website owners and developers create online experiences that are easier to see, understand, navigate, and use. WCAG covers many aspects of web accessibility, including text readability, keyboard navigation, image descriptions, and color contrast. The guidelines are organized into three levels of conformance: A (basic), AA (intermediate), and AAA (highest).
**Color contrast is an important part of WCAG compliance**, particularly for people with low vision or difficulty distinguishing certain colors. WCAG Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text, while Level AAA increases those requirements to 7:1 and 4.5:1, respectively. Using a color contrast checker helps web designers determine whether their text and background colors meet these standards. Choosing accessible color combinations not only improves readability for people with visual impairments but also creates a better browsing experience for everyone, especially when viewing websites on mobile devices or in bright sunlight.
Frequently Asked Questions About Color Contrast and WCAG Compliance
What is color contrast in web design?
Color contrast refers to the difference in brightness between two colors, such as text and its background. In web design, contrast is measured using a ratio ranging from 1:1 (no contrast) to 21:1 (maximum contrast). For example, black text on a white background has a contrast ratio of 21:1, making it highly readable. Colors that are too similar in brightness can make text difficult to distinguish, even if the colors themselves look different. A color contrast checker calculates this ratio and helps determine whether a color combination meets accessibility standards.
What is a good contrast ratio for website text?
For most website text, a contrast ratio of at least 4.5:1 is recommended to meet WCAG Level AA requirements. Large text, generally defined as text that is at least 24 pixels tall or approximately 18.7 pixels when bold, requires a minimum ratio of 3:1. For the more demanding WCAG Level AAA standard, normal text must have a contrast ratio of at least 7:1, while large text must meet 4.5:1. These minimums help ensure that text remains readable for people with different visual abilities.
What is WCAG compliance?
WCAG compliance means that a website or digital product meets a specified level of the Web Content Accessibility Guidelines established by the World Wide Web Consortium (W3C). These guidelines address accessibility issues such as color contrast, keyboard navigation, alternative text for images, readable content, and compatibility with assistive technologies. There are three conformance levels: A, AA, and AAA. Level AA is a common accessibility target for businesses and organizations because it addresses many of the barriers that prevent people with disabilities from using websites effectively.
Does passing a color contrast test mean my website is WCAG compliant?
No. Passing a color contrast test is an important step toward WCAG compliance, but it does not mean your entire website meets accessibility standards. WCAG includes many other requirements, such as making websites navigable using a keyboard, providing text alternatives for meaningful images, properly labeling form fields, and ensuring content works with screen readers. A color contrast checker evaluates specific color combinations, while a complete accessibility evaluation examines the website as a whole.
Can a website use brand colors and still meet WCAG standards?
Yes. In most cases, a website can maintain its brand identity while meeting WCAG color contrast requirements. If a particular brand color doesn't provide enough contrast against a background, a slightly darker or lighter variation may solve the problem without significantly changing its appearance. For example, a light blue that is difficult to read against white may become accessible by darkening the blue. A color contrast checker can help identify accessible alternatives that preserve the overall look and feel of your website.
Does WCAG compliance guarantee that my website meets ADA requirements?
Not necessarily. The Americans with Disabilities Act (ADA) is a federal civil rights law, while WCAG provides technical guidelines for digital accessibility. WCAG Level AA is widely used as a benchmark for accessible websites, and certain regulations specifically reference WCAG standards. However, meeting WCAG requirements does not automatically guarantee compliance with every applicable law. Legal obligations can vary depending on the type of organization, the services provided, and the regulations that apply. Following WCAG is an important way to reduce accessibility barriers and demonstrate a commitment to inclusive web design.