Graphical objects must have a 3:1 contrast ratio against adjacent colours for users to understand what they are or the meaning they communicate. Any visual effects used to indicate a control's state (for example, whether it’s selected or focused), must also have a 3:1 contrast ratio against adjacent colours. Success criterion 1.4.11 requires that active controls (for example, links, buttons, form fields) have a sufficient contrast ratio of 3:1 against surrounding colours for users to identify them and how they operate. WCAG 2.1 success criterion 1.4.11 - Non-text Contrast However, a good rule of thumb for most standard fonts is that 14pt is more or less equivalent to 19px, and 18pt to 24px. While ‘large text’ is defined as text in a 14pt bold or 18pt font, how this translates to text on a screen will vary depending on the font and device used.

Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Incidental:Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Large Text: Large-scale text and images of large-scale text need to have a contrast ratio of at least 3 :1.

There are 3 exceptions to this requirement: If that includes a large portion of your target audience, then a higher luminance contrast ratio of 7:1 is recommended. For this reason, a good luminance contrast ratio is essential for assisting with the readability of content for people with relevant vision impairments. While changes in hue and saturation tend not to affect the legibility of text for people with colour vision deficiencies, changes in lightness can. The aim of this requirement is to ensure that there is enough difference in the lightness, or relative luminance, of text and background so that the text is readable by people with low vision and those who have difficulty seeing colours.Ĭolours can be defined (in the HSL colour model) using 3 attributes: hue, saturation, and lightness (or luminance). Success criterion 1.4.3 requires that the “visual presentation of text and images of text has a contrast ratio of at least 4.5:1.” WCAG 2.1 success criterion 1.4.3 - Contrast (Minimum)

A number of tools can help you see how users who are colour blind or have difficulty viewing colour will see your page.

Pay particular attention to elements that are often problematic in regard to use of colour, such as graphs, diagrams, forms and form error messages.

Viewing or printing the page in greyscale (black and white) can help with this inspection.

Carry out a visual inspection of the page or resource to identify any information that is being conveyed only by colour.WCAG 2.1 technique G182 Testing the use of colour requirement One of the most common ways to address this issue is to ensure, where information is conveyed by colour differences, that same information is also available in text or through another visible indicator, such as an underline, pattern or shape. distinguishing elements in a graph with only differently coloured lines.showing required form fields in another colour without any other indication, such as an asterisk.indicating errors simply by highlighting them in red.displaying links in a different colour, but not providing any other visual cues, such as an underline.If colour is the only way that specific information is provided, then this information won’t be available to users who are unable to see or easily differentiate between colours.Įxamples of conveying information by colour alone include: Success criterion 1.4.1 requires that colour “is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”

WCAG 2.1 success criterion 1.4.1 - Use of colour This includes 3 WCAG 2.1 success criteria related to the use of colour: Web Content Accessibility Guidelines (WCAG) 2.1

New Zealand Government Web Accessibility Standard The New Zealand Government Web Accessibility Standard requires that web pages conform to the Web Content Accessibility Guidelines (WCAG) 2.1. It’s important to consider how you use colour in your online content (web pages, PDFs, or other online material) to ensure that people with colour blindness, colour vision deficiencies, partial sight or low vision, can access all the information in that content.

Color oracle test online