Difference between revisions of "Making more accessible background and text colour choices"

From EdTech Help
(Created page with "Many users will have visual impediments that will require good contrast in the documents you are producing. The best way to help these users is to make sure that the contrast...")
 
 
(2 intermediate revisions by the same user not shown)
Line 9: Line 9:
 
[[File:Steps to Change Foreground and Background Colors.png|frame|center]]
 
[[File:Steps to Change Foreground and Background Colors.png|frame|center]]
  
# If you need to edit the text color, click on the '''Text Colour''' button, which resembles a letter A with an underline: A.
+
# If you need to edit the text color, click on the '''Text Colour''' button, which resembles a letter A with an underline.
 
# To edit the background color of the text, which displays as if you had highlighted the text with a highlighter, click on the '''Background Colour''' button to the right of the '''Text Colour''' button. The '''Background Colour''' button resembles a solid black box containing a white letter A.
 
# To edit the background color of the text, which displays as if you had highlighted the text with a highlighter, click on the '''Background Colour''' button to the right of the '''Text Colour''' button. The '''Background Colour''' button resembles a solid black box containing a white letter A.
 
# Clicking on either of these buttons will display a '''Colour Picker''' from which you can select a color, such as Black or Maroon. Yellow is a '''Background Colour''' commonly used to highlight text.  Click on a color to select it.
 
# Clicking on either of these buttons will display a '''Colour Picker''' from which you can select a color, such as Black or Maroon. Yellow is a '''Background Colour''' commonly used to highlight text.  Click on a color to select it.
  
 
== Check your color selection for adequate contrast ==
 
== Check your color selection for adequate contrast ==
 +
[[File:Check your colour selection for adequate contrast.png|frame|center]]
  
 +
In most cases the contrast will be obvious, but if you need to verify, take the following steps:
  
 +
# Click on the '''More Colours...''' option in the '''Colour Picker'''.
 +
# A '''Select colour''' window will pop up. At the top right of the window, your selected colour will be displayed under ''Highlight''.
 +
# Under the box with your selected color, you'll see a six-digit ''hex'' number, starting with #.  This is the number that allows the internet browser to display the selected color.
 +
# Record the the six-digit hex number for the colour you have selected. Using an online tool such as [https://webaim.org/resources/contrastchecker/ WebAIM's Colour Contrast Checker], check how the '''Text Colour''' you've selected contrasts with the background colour behind your text (if you're selecting a Text Colour) or how your selected '''Background Colour''' contrasts with the colour of your text. To use [https://webaim.org/resources/contrastchecker/ WebAIM's Colour Contrast Checker], enter the hex number for your text and background colours into the boxes provided. The contrast checker will tell you the colours ''Pass'' if they have enough contrast.
 +
 +
== Quick Check: Sakai's Accessibility Checker ==
 +
 +
{{Template:Quick Check-Sakai's Accessibility Checker}}
  
 
{{Template:Accessibility}}
 
{{Template:Accessibility}}

Latest revision as of 20:01, 30 August 2021

Many users will have visual impediments that will require good contrast in the documents you are producing. The best way to help these users is to make sure that the contrast between the background and foreground has a ratio of 4.5:1 or higher. Leaving the defaults of the editor intact is best - black text on white, with a ratio of 21:1.

Examples of Contrast

Examples of Contrast.png

The image above contains examples of text with varying contrast ratios, and indicates whether the level of contrast would be adequate.

Steps to Change Foreground and Background Colours

Steps to Change Foreground and Background Colors.png
  1. If you need to edit the text color, click on the Text Colour button, which resembles a letter A with an underline.
  2. To edit the background color of the text, which displays as if you had highlighted the text with a highlighter, click on the Background Colour button to the right of the Text Colour button. The Background Colour button resembles a solid black box containing a white letter A.
  3. Clicking on either of these buttons will display a Colour Picker from which you can select a color, such as Black or Maroon. Yellow is a Background Colour commonly used to highlight text. Click on a color to select it.

Check your color selection for adequate contrast

Check your colour selection for adequate contrast.png

In most cases the contrast will be obvious, but if you need to verify, take the following steps:

  1. Click on the More Colours... option in the Colour Picker.
  2. A Select colour window will pop up. At the top right of the window, your selected colour will be displayed under Highlight.
  3. Under the box with your selected color, you'll see a six-digit hex number, starting with #. This is the number that allows the internet browser to display the selected color.
  4. Record the the six-digit hex number for the colour you have selected. Using an online tool such as WebAIM's Colour Contrast Checker, check how the Text Colour you've selected contrasts with the background colour behind your text (if you're selecting a Text Colour) or how your selected Background Colour contrasts with the colour of your text. To use WebAIM's Colour Contrast Checker, enter the hex number for your text and background colours into the boxes provided. The contrast checker will tell you the colours Pass if they have enough contrast.

Quick Check: Sakai's Accessibility Checker

Accessibility Checker 1.png

You can double-check the accessibility of content added in the Rich Text Editor by clicking the Check Accessibility icon.

More questions about Accessibility?


SAKAI logo2021.png

This page is adapted from an equivalent Sakai Community help article.

The original Sakai Community help article, unedited, is available at https://sakai.screenstepslive.com/s/sakai_help