Color Contrast Checker (WCAG2.1 & WCAG3/APCA Accessibility)
21.00
WCAG Contrast Ratio
Text Type | AA | AAA | Preview |
---|---|---|---|
Small Text | Passed | Passed | 16pt / 21px text |
Large Text | Passed | Passed | 18pt / 24px text |
Accessible Perceptual Contrast Algorithm (APCA) Contrast Ratio: 106Lc
Other Color Tools
WCAG Accessibility Color-Contrast Checker & Cheat Sheet
What does WCAG stand for?
WCAG stands for Web Content Accessibility Guidelines and defines international accessibility standards for websites and other digital content like mobile apps or e-books.
What is the WCAG 2.1 standard?
The WCAG version 2.1 standard is a set of technology-independent guidelines from the World Wide Web Consortium (W3C) that provide recommendations for making web content more accessible to people with various disabilities.
It was published in 2018 and is backwards-compatible with WCAG 2.0.
What is large and small text defined as according to WCAG?
WCAG defines large text as text that is at least 18pt (24px) or 14pt (19px) if it's bold.
Small text according to WCAG 2 is text smaller than 18pt (24px) or 14pt (19px) if it's bold.
What WCAG levels exist?
WCAG defines the following 3 levels of accessibility for web content:
- A (Basic accessibility)
- AA (Strong accessibility)
- AAA (Excellent accessibility)
Level AA is the widely adopted industry standard that sets a minimum level of accessibility that websites should strive for. Level AAA represents an enhanced standard, providing a greater degree of accessibility.
What are the minimum contrast ratios for text according to WCAG 2?
- Small Text requires the following minimum contrast ratios: 4.5 (AA), 7 (AAA).
- Large Text requires the following minimum contrast ratios: 3 (AA), 4.5 (AAA).
Do I need to adhere to the WCAG 2.1 standard for my website?
It depends on your specific case, but in 2025 the European Unions European Accessibility Act (EAA) became legally applicable. The EAA requires certain websites, apps, ecommerce platforms, ebooks/PDFs and other types of content to conform to WCAG 2.1 AA criteria within the EU.
The USA have adopted WCAG 2.1 as the technical standard for state- and local governments’ websites and mobile apps. Similar accessibility regulations exist in other regions.
How do I calculate the contrast ratio from hex codes?
The formula for calculating contrast ratio involves converting hex or RGB colors to their relative luminance values and then comparing them. This is a multi-step mathematical process. Our tool automates this entirely. You simply provide the two color codes, and the giga.tools contrast checker handles the complex calculations instantly, giving you the final ratio and compliance status.
Why is color contrast important for accessibility?
Sufficient color contrast is critical because it directly impacts a person's ability to perceive information. Users with low vision, color deficiencies, or even users in non-ideal viewing conditions (like screen glare on a mobile device) rely on high contrast to distinguish text from its background. Adhering to contrast guidelines makes your content usable for a much wider audience.
What is the Accessible Perceptual Contrast Algorithm (APCA)?
The Accessible Perceptual Contrast Algorithm (APCA) is a new, advanced method for calculating color contrast that is being developed for the future WCAG 3.0 guidelines. Unlike previous methods, APCA is designed to more accurately reflect how the human eye perceives differences in color and lightness. Its goal is to provide a more reliable and scientifically-grounded measure of text readability.
How is APCA different from the WCAG 2 contrast ratio?
The primary difference lies in the calculation model. The WCAG 2 contrast ratio is a relatively simple mathematical comparison of relative luminance. In contrast, APCA uses a more complex, perceptually-based model that considers factors like font size, font weight, and the specific colors being used (light-on-dark vs. dark-on-light). This results in a measurement that often aligns better with real-world human reading experiences.
Why does APCA treat dark mode differently?
APCA's algorithm accounts for the fact that human vision perceives light text on a dark background (light mode) differently than dark text on a light background. We are generally more sensitive to dark details on a bright field. APCA adjusts its calculations based on this "polarity," providing distinct and more accurate contrast requirements for both light and dark user interfaces.
What is the current status of WCAG 3 and APCA?
As of late 2025, WCAG 3.0, which includes APCA as its proposed method for contrast evaluation, is in a "Working Draft" status. This means it is still under development by the W3C and is not yet an official, finalized recommendation. It is subject to further changes and testing before it becomes a recognized web standard.
Will APCA replace the WCAG 2 contrast ratio?
Yes, the intention is for APCA to become the core method for evaluating text contrast in the future WCAG 3.0 standard, eventually replacing the WCAG 2.x ratio-based method. However, this transition will be gradual, and it will be several years before WCAG 3.0 is finalized and widely adopted as the industry and legal standard.