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).
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).
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.
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).
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).
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.
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.
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.
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.
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.
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.
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.
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.
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%.
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.