Wcag Color Contrast Checker How To Use. Color considerations for accessible designs. It checks the color contrast between the foreground and background of the elements that are in the page according to the wcag 2.
Wcag 2 1 guidelines state that colors should have a text to background contrast ratio of 4 5 1 for normal text and 3 1 for large text and non text elements such as form fields and other interactive elements to meet basic aa requirements or 7 1 for normal text and 4 5 1 for large text and non text elements to meet the stricter aaa requirements always aim for strict. Enter a foreground and background color in rgb hexadecimal format e g fd3 or f7da39 or choose a color using the color picker. Press the up and down keyboard arrows while over a number inside a functional color notation.
Wcag 2 0 level aa requires a contrast ratio of at least 4 5 1 for normal text and 3 1 for large text.
Wcag level aa success criterion states that a contrast ratio between a text and a background should be at least 4 5 1 for normal text and 3 1 for large text at least 18 point or 14 point and bold. It evaluates the contrast on all elements of the page considering their computed style for the color and background color css properties. Many common modern ux and ui design practices such as using light grey to indicate inactive fields do not pass the web content accessibility guidelines wcag when it comes to color contrast standards. The lightness slider can be used to adjust the selected color.
