Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
A
Accessibility
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 6
    • Issues 6
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge Requests 0
    • Merge Requests 0
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Analytics
    • Analytics
    • CI / CD
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Collapse sidebar
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • Development
  • Accessibility
  • Issues
  • #11

Closed
Open
Opened Dec 04, 2018 by JoeMurray@JoeMurrayMaintainer

Contrast ratios

WCAG 2.0 specifies various minimum contrast ratios between foreground and background for different sizes of fonts, and for bolded and non-bolded fonts https://www.w3.org/TR/WCAG20-TECHS/G18.html.

...Priority 2 (AA), and Priority 3 (AAA). Whether or not you need to reach an AAA conformance depends on your target audience. Read more about this on the w3 site. For large text (over 18 points) the contrast ratio for AA is 3:1 and for AAA 5:1. For small text it's 5:1 for AA and 7:1 for AAA. (http://www.colorsontheweb.com/Color-Tools/Color-Contrast-Analyzer)

More exact ratios and translations of font sizes to px directly from the WCAG first mentioned for bold and non-bold text are:

  • BOLD and < 14pt (18.5px): 7:1 contrast ratio
  • Not bold and < 18pt (24px): 7:1 contrast ratio
  • BOLD and >= 14pt (18.5px): 4.5:1 contrast ratio
  • Not bold and >= 18pt (24px): 4.5:1 contrast ratio

Using the contrast analyzer provided on the page above, the current Shoreditch contrast ratios are not sufficient in some contexts.

For example, on pages like New Contact and New Activity we get the following ratios:

Blue font #2786c2 on tan #efefe5 in 13px: 3.44:1 (below 5:1) Dimmed grey #999999 on offwhite #fff in 13px: 2.85:1 (below 5:1)

2018-12-04_09-16-41

2018-12-04_09-33-52

2018-12-04_09-51-12

We should meet a 5:1 ratio for all text < 18pt.

Edited Dec 04, 2018 by JoeMurray
Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
None
Due date
None
Reference: dev/accessibility#11