Contrast Ratio - published buttons, discussion subscription buttons, and "Course is Published" text

[d_j_corbin]

General requirement for 3:1 contrast ratio:

The way I interpret WCAG 1.4.3: In order for text to meet the 3:1 contrast ratio, text must be at least 18 point or 14 point bold, and that 14pt and 18pt are equivalent to approximately 18.5px and 24px. You can easily see that this is the requirement according to WCAG: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html#dfn-large-scale

Insufficient 3:1 contrast ratio for certain button texts in Canvas:

The 3:1 text for the published buttons (for example pages), discussion subscription buttons, and the "Course is Published" text (in course settings) are only 14px and 16px in size. So the size needs to be slightly increased in order to meet the AA requirement. Alternatively, Instructure could change the contrast slightly to ensure that these 3:1 texts meet the WCAG 1.4.3 requirement for both regular and large text sizes, without having to change the size of the texts. 

Regardless of the user's ability to resize text and regardless of the High Contrast UI in Canvas, accessibility should be the goal in the Standard UI - so Instructure should make sure these texts fully meet the WCAG 1.4.3 requirement.

I have tried to explain this to Instructure in Canvas Cases a few times but they still do not understand/acknowledge that the text sizes are too small and keep saying that everything is OK if the user uses the High Contrast UI. To me, the High Contrast UI is not an excuse to circumvent accessibility requirements for the Standard UI.

I know this is a small thing to request, but the constant back and forth in Canvas Cases is increasingly frustrating. If I am mistaken, please prove me wrong 🙂

[dsasaki]

Hey @d_j_corbin, Thank you for reaching out!  One main reason why we have high contrast mode is to allow schools the ability to add custom theming from our theme editor whilst being able to ensure contrast requirements.  The theme editor allows schools to adjust background color, text color, add logos, etc of their Canvas instance to customize their Canvas experience.  When high contrast mode is enabled, we remove any theme changes a school has done within the theme editor and set them to our high contrast palette to ensure we meet contrast requirements.   The decision to have two different views is a decision our design team has made and has been setup like this for quite some time.  All text and UI interface elements meet WCAG contrast requirements when high contrast mode is enabled.
Please let us know if you have any additional questions.

Thank you,

[dlyons]

To add on to @dsasaki's great explanation; we're in the process of updating some of the default styles and colors across Canvas which will include things like the "Published" button. High Contrast UI isn't going away because it has more functionality than just colors, but the proposed changes will resolve some contrast concerns in the standard UI.