Contrast Ratio: 21:1
Normal Text
WCAG AA:
Pass
WCAG AAA:
Pass
Is it easy to read?
Large Text (14pt bold)
WCAG AA:
Pass
WCAG AAA:
Pass
Is it easy to read?
Graphical Objects and User Interface Components
WCAG AA:
Pass
About Color Contrast Checker
Color Contrast Checker is a very useful free online web tool for developers and designers. It is designed and developed by Diversify India.
PageSpeed Insights (PSI) has an accessibility index, and this index is affected by the contrast ratio between foreground and background color. So to get a 100 out of 100 score in the PageSpeed Insights accessibility index, ensure that the contrast ratio between foreground and background colors qualifies for the WCAG (Web Content Accessibility Guidelines) level AA requirements of contrast ratio.
To check the contrast ratio between foreground and background colors, we just have to pick the foreground and background colors, and Diversify India’s contrast ratio checker tool will calculate the contrast ratio and validate the calculated ratio against the WCAG level AA and WCAG level AAA requirements of contrast ratio for normal text, large text, graphical objects, and user interface components.
Additionally, we can change the lightness of the foreground and background colors using the lightness slider to increase or decrease the contrast ratio. This free online contrast checking tool is powered by Diversify India’s powerful color conversion tool, so it can support RGB, RGBA, HSL, HSLA, Hex, HWB, and CMYK color types for foreground and background colors.
List of Color Tools
Frequently Asked Questions
What contrast ratio is required for WCAG Level AA?
Web Content Accessibility Guidelines (WCAG) Level AA by w3.org requires a contrast ratio of at least 3:1 for the large text, graphical objects, and user interface components. WCAG Level AA requires a contrast ratio of at least 4.5:1 for the normal text.
What contrast ratio is required for WCAG Level AAA?
Web Content Accessibility Guidelines (WCAG) Level AAA by w3.org has more strict requirements for contrast ratios for normal and large text than WCAG Level AA. WCAG level AAA requires at least a 4.5:1 contrast ratio for large text. WCAG level AAA requires a contrast ratio of at least 7:1 for normal text. In WCAG level AAA, there is no specific contrast ratio requirement for graphical objects and user interface components. The ratio of at least 3:1 at level AA is generally considered sufficient for graphical objects and user interface components.
As per WCAG, what is the font size for the large text?
As per WCAG, text that is 18 points or 14 points (bold) is considered large text. In CSS pixels, this typically translates to approximately 24 pixels for regular (non-bold) text and 18.66 pixels for bold text.