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
  • Issues
  • #25126
Closed
Open
Issue created Dec 29, 2017 by Patrick H. Lauke@patrickhlaukeContributor

Color combinations that fail WCAG 2 AA 4.5:1 contrast ratio

Doubt that all of these will be tackled, but for reference (following https://github.com/twbs/bootstrap/pull/25123 which at least fixed one of the badly borked ones):

From http://getbootstrap.com/docs/4.0/getting-started/theming/

Blue Foreground: #FFFFFF Background: #007BFF The contrast ratio is: 4.0:1 Text failed at Level AA

Indigo Foreground: #FFFFFF Background: #6610F2 The contrast ratio is: 7.2:1 Text passed at Level AA

Purple Foreground: #FFFFFF Background: #6F42C1 The contrast ratio is: 6.5:1 Text passed at Level AA

Pink Foreground: #FFFFFF Background: #E83E8C The contrast ratio is: 3.8:1 Text failed at Level AA

Red Foreground: #FFFFFF Background: #DC3545 The contrast ratio is: 4.5:1 Text passed at Level AA

Orange Foreground: #212529 Background: #FD7E14 The contrast ratio is: 6.0:1 Text passed at Level AA

Yellow Foreground: #212529 Background: #FFC107 The contrast ratio is: 9.5:1 Text passed at Level AA

Green Foreground: #FFFFFF Background: #28A745 The contrast ratio is: 3.1:1 Text failed at Level AA

Teal Foreground: #FFFFFF Background: #20C997 The contrast ratio is: 2.1:1 Text failed at Level AA

Cyan Foreground: #FFFFFF Background: #17A2B8 The contrast ratio is: 3.0:1 Text failed at Level AA

From http://getbootstrap.com/docs/4.0/utilities/colors/

.text-primary Foreground: #007BFF Background: #FFFFFF The contrast ratio is: 4.0:1 Text failed at Level AA

.text-secondary Foreground: #6C757D Background: #FFFFFF The contrast ratio is: 4.7:1 Text passed at Level AA

.text-success Foreground: #28A745 Background: #FFFFFF The contrast ratio is: 3.1:1 Text failed at Level AA

.text-danger Foreground: #DC3545 Background: #FFFFFF The contrast ratio is: 4.5:1 Text passed at Level AA

.text-warning Foreground: #FFC107 Background: #FFFFFF The contrast ratio is: 1.6:1 Text failed at Level AA

.text-info Foreground: #17A2B8 Background: #FFFFFF The contrast ratio is: 3.0:1 Text failed at Level AA

.text-light Foreground: #F8F9FA Background: #343A40 The contrast ratio is: 10.9:1 Text passed at Level AA

.text-dark Foreground: #343A40 Background: #FFFFFF The contrast ratio is: 11.5:1 Text passed at Level AA

.text-muted Foreground: #6C757D Background: #FFFFFF The contrast ratio is: 4.7:1 Text passed at Level AA

.text-white Foreground: #FFFFFF Background: #343A40 The contrast ratio is: 11.5:1 Text passed at Level AA

.bg-primary Foreground: #FFFFFF Background: #007BFF The contrast ratio is: 4.0:1 Text failed at Level AA

.bg-secondary Foreground: #FFFFFF Background: #6C757D The contrast ratio is: 4.7:1 Text passed at Level AA

.bg-success Foreground: #FFFFFF Background: #28A745 The contrast ratio is: 3.1:1 Text failed at Level AA

.bg-danger Foreground: #FFFFFF Background: #DC3545 The contrast ratio is: 4.5:1 Text passed at Level AA

.bg-warning Foreground: #343A40 Background: #FFC107 The contrast ratio is: 7.1:1 Text passed at Level AA

.bg-info Foreground: #FFFFFF Background: #17A2B8 The contrast ratio is: 3.0:1 Text failed at Level AA

.bg-dark Foreground: #FFFFFF Background: #343A40 The contrast ratio is: 11.5:1 Text passed at Level AA

.bg-white Foreground: #343A40 Background: #FFFFFF The contrast ratio is: 11.5:1 Text passed at Level AA

Assignee
Assign to
Time tracking