Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !30548

Ensure to pass 4.5:1 contrast ratio everywhere

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge master-fod-4.5-min-contrast-ratio into main Apr 10, 2020
  • Overview 0
  • Commits 6
  • Pipelines 0
  • Changes 0

Created by: ffoodd

Sounds like dependabot one, but isn't :)

Paving the way in #30468 — and to keep going with #29315 : my goal is to make this happen after tackling every obstacles.

To solve before the bump

Those should probably adressed separately, consider this as a roadmap to enlightment :D

  • #30989 → .btn-success:hover case mentionned in #30468 (comment);
    • #30972 is maybe the wrong direction too—there mght be no need to change colors at all.
    • #31276 did it 🎉
  • #30622 → color-level(), lighten() and darken() seem misused: either on :hover for buttons (always darken) or to define color and background-color with the same level, no matter what the base color is (eg. .alert-light seems wrong) — there's probably room to improvement by using tint() and shade() here;
    • Relates to #30487 (closed)
  • #30550 → .text-info, .text-black-50 and .text-white-50 can't make it to 4.5:1 — however, using $gray-900 instead of $gray-800 for $dark would solve this (and several other dark-ish things with insufficient contrasts);
  • A few components use light grays as background (mostly in cards and navbars) without accounting for it in their color usage, resulting in insufficient contrasts when used with .text-muted or .disabled things;
  • Some .btn-outline-* and .link-* examples should be shown with dark background:
    1. #30044 will help to associate a contrast color for the docs part, through the data layer
    2. #30551 was a wrong direction but helped to define a visual consideration for examples with multiple backgrounds
    3. TODO will need another PR after #30044 to tackle this, I guess.

Merging this would be a kind of consecration 🎉

Fixes #25126 (closed)

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: master-fod-4.5-min-contrast-ratio