Opened 110 minutes ago

#36870 new Uncategorized

Insufficient contrast in console-style code blocks

Reported by: Clifford Gama Owned by:
Component: Documentation Version: 6.0
Severity: Normal Keywords: Accessibility, WCAG
Cc: Triage Stage: Unreviewed
Has patch: no Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no

Description

Not sure if this is the correct place to report this. Several console-style code blocks in the Django documentation fail WCAG contrast requirements, making commands and outputs difficult to read.

From some investigation, I've found that the issue applies to the following directives (they may be others):

  1. .. console:: blocks where lines do _not_ begin with the $ shell prompt. (If the commands begin with the prompt, they are rendered with better contrast, and with the widget for switching between Windows/Linux-style command prompts). But because of the third case below, this may not be a full solution)
  2. .. doscon:: blocks
  3. Shell output blocks (i.e. command results, not user input)

These blocks currently render with the following colors:

Dark theme: Background: #181d27 ; Foreground: #8b949e (fails WCAG AAA (normal text))

Light theme: Background: #F8F8F8 ; Foreground: #808080 (fails WCAG AA (normal text) fails WCAG AAA (normal and Large text)

I checked using ​https://colourcontrast.cc/

This problem is particularly noticeable on the ​django-admin ref docs where several console commands do not prepend the $ prompt.

Change History (0)

Note: See TracTickets for help on using tickets.
Back to Top