1. Home
  2. :
  3. WCAG Guidelines
  4. :
  5. 1.4.11 Non-Text Contrast – Level...
  6. :
  7. Are all <canvas> elements styled...

Are all <canvas> elements styled to ensure compatibility with Windows High Contrast mode?

Goal

Ensure that users on Windows High Contrast Mode can still distinguish and perceive the items in the <canvas>.

Why this matters

Assuming that the canvas contains meaningful content, if you don’t validate that the canvas works in High Contrast Mode, your user may not be able to see or understand the content.

How to implement

TBD

How to test

Prerequisite: You have a Windows based operating system and the ability to switch it into Windows High Contrast Mode.

  1. Turn on High Contrast Mode.
  2. View the page.
    1. Is the canvas still able to be perceived against its new background colors? Important parts of the canvas should be at a 3:1 ratio to their backgrounds to be perceivable according to 1.4.11 Non-text Contrast.
    2. Is all text in the canvas still meeting the 4.5:1 contrast ratio for smaller text and 3:1 ratio for larger text according to 1.4.3 Contrast (Minimum).
Note!
Keep in mind that if your user is on Windows High Contrast Mode, they probably want text to comply with 1.4.6 Contrast (Enhanced).