Skip to content
Home Decoding WCAG 1.4.11 Non-text Contrast – Part 2 

Decoding WCAG 1.4.11 Non-text Contrast – Part 2 

Decoding WCAG 1.4.11 Non-text Contrast - 2

Welcome to blog number 2 of this series. In the previous blog, we talked in detail about the success criterion, its requirements and most importantly the methodology that can be used for testing. 

So, let’s put our methodology to work right away on different non-text elements. 

Non-text Contrast of Form Elements 

    There are many different types of form elements and as many possible iterations based on different designs and use of CSS. However, in the case of form elements, one major contrasting requirement is its identification. In simple words, we can say where a form field starts and ends, or we can all also call this the hit area of the form field. 

      Typically, this is conveyed by the borders of the form field or the outermost part of the form field which is the part of the hit area. 

        Now, let’s apply our methodology to a few form elements. 

          1. Input Fields 

            In the case of an input field, its identification relies on its typing area being differentiated from its adjacent background. This may be identified by its edges or its filled area. 

              Either the edge or the filled area should pass the contrast requirement. 

                Scenario 1.1 – Passing example of an input field (borders as non-text element) 

                  Consider a “Username” input field with Blue (#425CFB) border in the default state. The internal colour of this input field is White (#FFFFFF). The input field is displayed on a surface with White colour (#FFFFFF). 

                    Username input field with a blue border that has white adjacent color

                      Methodology Checklist  

                          • Informational or Not – Yes 
                          • Non-text Identification – The borders of the input field are informational here as these borders are used to identify the input field. 
                          • Non-text element Colour – Blue (#425CFB) – The rectangular border that encompasses the entire input area is our non-text element here. 
                          • Adjacent Colour – White (#FFFFFF) – The area outside the field becomes its adjacent colour. 
                          • Contrast Ratio – 5.1:1 

                      Result: This text input field passes the success criterion as Blue rectangular input field has a contrast ratio of 5.1:1 with the white adjacent colour. 

                        Scenario 1.2 – Failing example of an input field (input area as non-text element) 

                          Consider a “Username” input field with no borders in the default state. The colour of this input field is White (#FFFFFF). The input field is displayed on a surface with a Light Grey colour (#C3C3C3). 

                            Username input field with no border that has white internal color and is placed on a grey background.

                              Methodology Checklist  

                                  • Informational or Not – Yes 
                                  • Non-text Identification – The input field area is informational here as it is used to identify the input field.  
                                  • Non-text element Colour – White (#FFFFFF) – The entire input area is our non-text element here. 
                                  • Adjacent Colour – Light Grey (#C3C3C3) – The area outside the field becomes its adjacent colour. 
                                  • Contrast Ratio – 1.8:1 

                              Result: This text input field fails the success criterion as the White rectangular input field has a contrast ratio of 1.8:1 with the Light Grey adjacent colour. 

                                Scenario 1.3 – Exception example - Input Fields with Placeholder text 

                                  Consider a “Username” input field with no borders in the default state. The colour of this input field is White (#FFFFFF). The input field is displayed on a surface with a Light Grey colour (#C3C3C3). The Black (#000000) visual label/placeholder is placed inside the input field. 

                                    Username input field with no border that has white internal color and is placed on a grey background. It has a black color placeholder text as Username.

                                      Methodology Checklist  

                                          • Informational or Not – No 
                                          • Non-text Identification – The input field area is not informational here as it is not the only means to identify the input field. The input field can also be identified with the placeholder text. 
                                          • Non-text element Colour – Not required to check (as input field area is not informational here). 
                                          • Adjacent Colour – Not required to check (as input field area is not informational here). 
                                          • Contrast Ratio – Not required to check (as input field area is not informational here). 

                                      Result: This input field has the same insufficient contrast ratio as shown in the previous scenario 1.2. However, this example does not fail the Success Criterion as it has text inside it. In such cases, the non-text content is not the only means to perceive and understand the information. However, the text is required to contrast as per success criterion 1.4.3. 

                                        2. Checkboxes

                                          In the case of a checkbox, there are two important parts of the checkbox that are informational here. First, are the boundary/edges of the checkbox for its identification and second is the tick icon for its state information. 

                                            In this case, both key parts of the checkbox need to pass the contrast requirements individually. We shall run them both through our checklist. 

                                              Scenario 2.1 – Passing example of a checkbox 

                                                Consider an “I agree to the terms & conditions” Checkbox with a Violet (#632289) border in the checked state. The internal colour of this checkbox is White (#FFFFFF). The tick icon placed inside is Violet (#632289) in colour. The checkbox is displayed on a surface with White colour (#FFFFFF). 

                                                  I Agree to the terms & conditions checkbox with a violet border. The checkbox is placed on a white background colour. The checkbox has a violet tick placed on internal white colour of the checkbox to indicate the state.

                                                    Methodology Checklist  

                                                        • Informational or Not – Yes 
                                                        • Non-text Identification  
                                                          • Checkbox Border – Checkbox border for its identification. 
                                                          • Tick icon – For its checked state. 
                                                        • Non-text element Colour 
                                                          • Checkbox Border – Violet (#632289) – The square border that encompasses the tick icon. 
                                                          • Tick icon – Violet (#632289) – The right tick icon inside the checkbox square. 
                                                        • Adjacent Colour – White (#FFFFFF) – The area outside the checkbox square and the area adjacent to the tick icon becomes its adjacent colour. 
                                                        • Contrast Ratio – 9.9:1 for both checkbox border and tick icon. 

                                                    Result: Both parts of the checkbox pass the success criterion as the Violet checkbox square, and the Violet right tick icon has a contrast ratio of 9.9:1 with the White adjacent colour. 

                                                      Scenario 2.2 – Failing example of a checkbox. 

                                                        Consider an “I agree to the terms & conditions” Checkbox with a Light Grey #C3C3C3) border in the checked state. The internal colour of this checkbox is White (#FFFFFF). The tick icon placed inside is also Light Grey (#C3C3C3) in colour. The checkbox is displayed on a surface with White colour (#FFFFFF). 

                                                          I Agree to the terms & conditions Checkbox with a light grey border. The checkbox is placed on a white background colour. The checkbox has a light grey tick placed on internal white colour of the checkbox to indicate the state.

                                                            Methodology Checklist  

                                                                • Informational or Not – Yes 
                                                                • Non-text Identification  
                                                                  • Checkbox Border – Checkbox border for its identification. 
                                                                  • Tick icon – For its checked state. 
                                                                • Non-text element Colour 
                                                                  • Checkbox Border – Light Grey (#C3C3C3) – The square border that encompasses the tick icon. 
                                                                  • Tick icon – Light Grey (#C3C3C3) – The right tick icon inside the checkbox square. 
                                                                • Adjacent Colour – White (#FFFFFF) – The area outside the checkbox square and the area adjacent to the tick icon becomes its adjacent colour. 
                                                                • Contrast Ratio – 1.8:1 for both the checkbox border and the tick icon. 

                                                            Result: Both parts of the checkbox fail the success criterion as the Light Grey checkbox square and the Light Grey tick icon has a contrast ratio of 1.8:1 with the White adjacent colour. 

                                                              Non-text Contrast of Graphical Objects 

                                                                Graphical objects can be used to communicate information and create controls/links. If the information or the purpose of the control solely relies on its graphic, then in such cases the graphical object needs to suffice the 3:1 contrast requirement under Non-text Contrast. It is not required that every part of the graphical object fulfils the contrast requirement. It is sufficient if the key parts that are important to understand the graphical object and consume the information are passing the contrast ratio. 

                                                                  Now let’s move on to the methodology with some examples. 

                                                                    3. Image Buttons

                                                                      Controls that only use icons, images, or graphics as the means to indicate their presence and purpose are required to contrast against the adjacent background. It should be the key parts that need to have sufficient contrast. 

                                                                        Scenario 3.1 – Passing example of an image button 

                                                                          Consider a floppy disk icon indicating a “Save” button in its default state. The Black icon (#000000) is placed on a Light Grey (#C3C3C3) area. The entire button includes the Light Grey (#C3C3C3) area and it is displayed on the White (#FFFFFF) background of the page. 

                                                                            A black floppy disk icon outline on grey background used for Save button

                                                                              Methodology Checklist  

                                                                                  • Informational or Not – Yes 
                                                                                  • Non-text Identification – The outline of the icon is critical to understand the purpose of the button. 
                                                                                  • Non-text element Colour – Black (#000000) – The outline of the floppy disk icon. 
                                                                                  • Adjacent Colour – Light Grey (#C3C3C3) – The area surrounding the icon outline becomes its adjacent colour. 
                                                                                  • Contrast Ratio – 11.9:1 

                                                                              Result: This image button passes the success criterion as the Black icon has a contrast ratio of 11.9:1 with the Light Grey adjacent colour. 

                                                                                Scenario 3.2 – Failing example of an image button 

                                                                                  Consider a floppy disk icon indicating a “Save” button in its default state. The Light Grey icon (#C3C3C3) is displayed on a White (#FFFFFF) area. 

                                                                                    A light grey floppy disk icon outline on white colour background used for save button

                                                                                      Methodology Checklist  

                                                                                          • Informational or Not – Yes 
                                                                                          • Non-text Identification – The outline of the icon is critical to understand the purpose of the button. 
                                                                                          • Non-text element Colour – Light Grey (#C3C3C3) – The outline of the floppy disk icon. 
                                                                                          • Adjacent Colour – White (#FFFFFF) – The area surrounding the icon outline becomes its adjacent colour. 
                                                                                          • Contrast Ratio – 1.8:1 

                                                                                      Result: This image button fails the success criterion as the Light Grey icon has a contrast ratio of 1.8:1 with the White adjacent colour. 

                                                                                        Scenario 3.3 – Exception example - Image buttons with text 

                                                                                          Consider a floppy disk icon indicating a “Save” button in its default state. The Light Grey icon (#C3C3C3) is displayed on a White (#FFFFFF) area. There is “Save” text adjacent to the icon. 

                                                                                             
A light grey floppy disk icon outline on white colour background used for save button along with a black coloured "Save" button text

                                                                                              Methodology Checklist  

                                                                                                  • Informational or Not – No 
                                                                                                  • Non-text Identification – The icon of the button is not informational here as it is not the only means to identify purpose and locate the button. The same can also be identified with the adjacent text. 
                                                                                                  • Non-text element Colour – Not required to check (as icon is not informational here). 
                                                                                                  • Adjacent Colour – Not required to check (as icon is not informational here). 
                                                                                                  • Contrast Ratio – Not required to check (as icon is not informational here). 

                                                                                              Result: The save icon has the same insufficient contrast ratio as shown in the previous scenario 3.2. However, this example does not fail the Success Criterion as it has text that is part of the button. In such cases, the non-text content is not the only means to perceive and understand information. However, the text is required to have sufficient contrast as per success criterion 1.4.3. 

                                                                                                4. Informative Images

                                                                                                  Images that communicate information are required to contrast against the adjacent colours. The key parts of informative images should suffice the minimum contrast requirement. 

                                                                                                    Scenario 4.1 – Passing example of an informative image 

                                                                                                      Consider a Bluetooth icon indicating the support of Bluetooth technology. The Blue icon (#0E1CE8) is displayed on a White (#FFFFFF) area. 

                                                                                                        A blue coloured bluetooth icon placed on white colour background

                                                                                                          Methodology Checklist  

                                                                                                              • Informational or Not – Yes 
                                                                                                              • Non-text Identification – The outline of the icon is critical to understanding the information. 
                                                                                                              • Non-text element Colour – Blue (#0E1CE8) – The outline of the Bluetooth icon. 
                                                                                                              • Adjacent Colour – White (#FFFFFF) – The area surrounding the icon outline becomes its adjacent colour. 
                                                                                                              • Contrast Ratio – 8.9:1 

                                                                                                          Result: This Bluetooth icon passes the success criterion as the Blue icon outline has a contrast ratio of 8.9:1 with the White adjacent colour. 

                                                                                                            Scenario 4.2 – Failing example of an informative image 

                                                                                                              Consider a Bluetooth icon indicating the support of Bluetooth technology. The Light Blue icon (#75CDF4) is displayed on a White (#FFFFFF) area. 

                                                                                                                A light blue coloured bluetooth icon placed on white colour background

                                                                                                                  Methodology Checklist  

                                                                                                                      • Informational or Not – Yes 
                                                                                                                      • Non-text Identification – The outline of the icon is critical to understanding the information. 
                                                                                                                      • Non-text element Colour – Light Blue (#75CDF4) – The outline of the Bluetooth icon. 
                                                                                                                      • Adjacent Colour – White (#FFFFFF) – The area surrounding the icon outline becomes its adjacent colour. 
                                                                                                                      • Contrast Ratio – 1.8:1 

                                                                                                                  Result: This Bluetooth icon fails the success criterion as the Light Blue icon outline has a contrast ratio of 1.8:1 with the White adjacent colour. 

                                                                                                                    Scenario 4.3 – Exception example - Informative image with adjacent text 

                                                                                                                      Consider a Bluetooth icon indicating the support of Bluetooth technology. The Light Blue icon (#75CDF4) is displayed on a White (#FFFFFF) area. There is Black (#000000) “Bluetooth” text adjacent to the icon. 

                                                                                                                        A light blue coloured bluetooth icon placed on white colour background along with black coloured text "Bluetooth"

                                                                                                                          Methodology Checklist  

                                                                                                                              • Informational or Not – No 
                                                                                                                              • Non-text Identification – The outline of the icon is not informational here as it is not the only means to convey the information. The same information is available in text. 
                                                                                                                              • Non-text element Colour – Not required to check (as icon is not informational here). 
                                                                                                                              • Adjacent Colour – Not required to check (as icon is not informational here). 
                                                                                                                              • Contrast Ratio – Not required to check (as icon is not informational here). 

                                                                                                                          Result: The icon has the same insufficient contrast ratio as shown in the previous scenario 4.2. However, this example does not fail the success criterion as it has text adjacent to it that provides the same information. In such cases, the non-text content is not the only means to perceive and understand information. However, the text is required to have sufficient contrast as per success criterion 1.4.3. 

                                                                                                                            5. Informative Chart Images

                                                                                                                              Images that communicate information are required to contrast against the adjacent colours. All the key parts of informative charts, graphs, and so on should suffice the minimum contrast requirement. 

                                                                                                                                Scenario 5.1 – Passing example of an Informative Pie Chart 

                                                                                                                                  Consider a pie chart showcasing the severity of accessibility issues on a webpage. The severities “Blocker”, “Critical”, “Major”, and “Minor” are depicted by each slice of the pie chart. Each slice is coloured differently, Blocker (Light Red), Critical (Light Orange), Major (Yellow) and Minor (Light Green). Each slice has a visible Black (#000000) border, and the slices are placed at a distance. Each slice is labelled with text indicating the severity.  The pie chart is displayed on a white background. 

                                                                                                                                    Pie chart for the severity of accessibility issues with labeled and bordered slices Minor, Major, Critical and Blocker that are placed at a slight distance.

                                                                                                                                      Methodology Checklist  

                                                                                                                                          • Informational or Not – Yes 
                                                                                                                                          • Non-text Identification – The slice border - Each slice must be distinguished from the other to identify the share of each slice. 
                                                                                                                                          • Non-text element Colour – Black border of pie slices (#000000) 
                                                                                                                                          • Adjacent Colour – White (#FFFFFF) – The area surrounding the pie chart. 
                                                                                                                                          • Contrast Ratio – 21.0:1 

                                                                                                                                      Note: The same test should be performed for each pie slice border against the white background. 

                                                                                                                                        Result: This Pie chart passes the success criterion as the pie slice border has a sufficient contrast ratio of 21.0:1 with the white background. 

                                                                                                                                          Scenario 5.2 – Failing Example of an Informative Pie Chart 

                                                                                                                                            Consider a pie chart showcasing the severity of accessibility issues on a webpage. The severities “Blocker”, “Critical”, “Major”, and “Minor” are depicted by each slice of the pie chart. Each slice is coloured differently, Blocker (Light Red), Critical (Light Orange), Major (Yellow) and Minor (Light Green). Each slice is labelled with text indicating the severity. The pie chart is displayed on a white background. 

                                                                                                                                              Pie chart for severity of accessibility issues with labeled slices Minor, Major, Critical and Blocker that are immediately adjacent to each other.

                                                                                                                                                Methodology Checklist  

                                                                                                                                                    • Informational or Not – Yes 
                                                                                                                                                    • Non-text Identification – Each slice must be distinguished from the other to identify the share of each slice. 
                                                                                                                                                    • Non-text element Colour – (Blocker - Slice) Light Red (#FF5050) 
                                                                                                                                                    • Adjacent Colour –  
                                                                                                                                                      • White (#FFFFFF) – The area surrounding the pie chart. 
                                                                                                                                                      • Light Green (#A9D18E) – Pie chart slice (Minor) 
                                                                                                                                                      • Light Orange (#ED7D31) – Pie chart slice (Critical) 
                                                                                                                                                    • Contrast Ratio –  
                                                                                                                                                      • 3.2:1 (with background) Pass 
                                                                                                                                                      • 1.9:1 (with pie slice Minor) Fail 
                                                                                                                                                      • 1.2:1 (with pie slice Critical) Fail 

                                                                                                                                                Note: The same test should be performed for each pie slice amongst each other. 

                                                                                                                                                  Result: This Pie chart fails the success criterion as the pie slices do not have sufficient contrast ratio against each other and the background. For example, the “Blocker” slice has a contrast ratio of 1.8:1 with the “Minor” slice. 

                                                                                                                                                    Scenario 5.3 – Exception example - Informative Pie Chart with complete text labels 

                                                                                                                                                      Consider a pie chart showcasing the severity of accessibility issues on a webpage. The severities “Blocker”, “Critical”, “Major”, and “Minor” are depicted by each slice of the pie chart. Each slice is coloured differently, Blocker (Light Red), Critical (Light Orange), Major (Yellow) and Minor (Light Green). The pie chart is displayed on a white background. The slices have a clear text label along with the values in percentage, Blocker 17%, Critical 28%, Major 33% and Minor 22%. 

                                                                                                                                                        Pie chart for severity of accessibility issues with immediately adjacent slices that have label value as Minor 22%, Major 33%, Critical 28% and Blocker 17%.

                                                                                                                                                          Methodology Checklist  

                                                                                                                                                              • Informational or Not – No 
                                                                                                                                                              • Non-text Identification – The slices are not informational here as their share is not required to be distinguished to identify the slice share. The same information is available through text. 
                                                                                                                                                              • Non-text element Colour – Not required to check (as pie slices are not informational here). 
                                                                                                                                                              • Adjacent Colour – Not required to check (as pie slices are not informational here). 
                                                                                                                                                              • Contrast Ratio – Not required to check (as pie slices are not informational here). 

                                                                                                                                                          Result: The pie chart has the same failing colour combination as shown in the scenario 5.2 pie chart. However, this example does not fail the Success Criterion as each pie slices have a clearly labelled text with values in percentage. The text label of the pie slice is sufficient to communicate the same information. In such cases, the non-text content is not the only means to perceive and understand information. However, the text is required to have sufficient contrast as per success criterion 1.4.3. 

                                                                                                                                                            Note: The requirements of success criterion 1.4.1 Use of Color (Level A) needs to be checked separately for the above pie chart examples. 

                                                                                                                                                              Conclusion 

                                                                                                                                                                In this blog, we applied the testing methodology to some non-text elements like the form controls. A similar approach can be assigned to other form elements as well as informational non-text elements. We have covered quite a few examples, but it is not over yet. There will be one last and final part of this blog series. which will focus on the contrast requirements and variations of the infamous focus indicator. We have purposely segregated this into a separate blog as focus indicators can have some unique requirements. So do watch out for the third and final blog in this series! 

                                                                                                                                                                  This article by Salim Khan is a part of our BB Geek series where BarrierBreak team members share their expertise on accessibility and inclusion, drawing from their extensive experience in the field.

                                                                                                                                                                    Leave a Reply

                                                                                                                                                                    Your email address will not be published. Required fields are marked *

                                                                                                                                                                    Back To Top