Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

accessibility - colors contrast ratio #3572

Closed
benjaminach opened this Issue May 22, 2012 · 3 comments

Comments

Projects
None yet
3 participants

Hello,

For the AA level in WCAG2 : Using a contrast ratio of 3:1 for large text and 4,5:1 for small text and providing additional visual cues on focus for links or controls where color alone is used to identify them - http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G183. http://www.paciellogroup.com/blog/2012/05/whats-large-text-in-wcag-2-0-parlance/

For exemple, the warning alert box have a contrast of 2,5 (background-color: #FCF8E3; color: #C09853;).
We should have at least (background-color: #FCF8E3; color: #A16B0F;).

you can use contrast-a http://www.dasplankton.de/ContrastA/ or the Juicy Studio: Colour Contrast Analyser https://addons.mozilla.org/en-US/firefox/addon/juicy-studio-accessibility-too/

Owner

mdo commented May 23, 2012

If you're available, please submit a pull request and we'll check it out. Always nice to have those guidelines meet, but I don't think we'll go out of our way for them always.

Hello,

I ran through some corrections for making Bootstrap accessible for use to meet the standards of The Paciello Group and the W3C recommendation.

Here are the three simple solutions:
DEFAULT: div class="alert" div class="alert alert-block" Foreground text: #5E4823
ERROR: div class="alert-error" Foreground text: #6C2726
SUCCESS: div class="alert-success" Foreground text: #13476D

With all due respect, I would suggest going out of your way for these guidelines to prevent lawsuits from users: http://en.wikipedia.org/wiki/National_Federation_of_the_Blind_v._Target_Corporation

Below is the documentation write up:

CONTRAST ISSUES with Twitter Bootstrap Alerts.

Reference URL: http://www.paciellogroup.com/resources/contrast-analyser.html

DEFAULT:


Foreground: #C09853 - Background: #FBEED5
colour difference:275 / brightness difference:83

The difference in brightness between the two colours is not sufficient. The threshold is 125, and the result of the foreground and background colours is 83.

The difference in colour between the two colours is not sufficient. The threshold is 500, and the result of the foreground and background colours is 275.

ERROR:


Foreground: #B94A48 - Background: #F2DEDE
colour difference:355 / brightness difference:121

The difference in brightness between the two colours is not sufficient. The threshold is 125, and the result of the foreground and background colours is 121.

The difference in colour between the two colours is not sufficient. The threshold is 500, and the result of the foreground and background colours is 355.

SUCCESS:


Foreground: #468847 - Background: #DFF0D8
colour difference:402 / brightness difference:124

The difference in brightness between the two colours is not sufficient. The threshold is 125, and the result of the foreground and background colours is 124.

The difference in colour between the two colours is not sufficient. The threshold is 500, and the result of the foreground and background colours is 402.

Note: Whilst the colour difference doesn't comply with the W3C specified range, it does comply with the range used by Hewlett Packard. Hewlett Packard recommends a colour difference limit of 400.

SOLUTION COLORS:
DEFAULT:


Foreground: #5E4823

ERROR:


Foreground: #6C2726

SUCCESS:


Foreground: #13476D

DEFAULT:


Foreground: #5E4823 - Background: #FBEED5

colour difference:501 / brightness difference:165

The difference in brightness between the two colours is sufficient. The threshold is 125, and the result of the foreground and background colours is 165.

The difference in colour between the two colours is sufficient. The threshold is 500, and the result of the foreground and background colours is 501.

ERROR:


Foreground: #6C2726 - Background: #F2DEDE
colour difference:501 / brightness difference:168

The difference in brightness between the two colours is sufficient. The threshold is 125, and the result of the foreground and background colours is 168.

The difference in colour between the two colours is sufficient. The threshold is 500, and the result of the foreground and background colours is 501.

SUCCESS:


Foreground: #13476D - Background: #D9EDF7
colour difference:502 / brightness difference:173

The difference in brightness between the two colours is sufficient. The threshold is 125, and the result of the foreground and background colours is 173.

The difference in colour between the two colours is sufficient. The threshold is 500, and the result of the foreground and background colours is 502.

Owner

mdo commented Sep 5, 2012

Unfortunately going that dark removes much of the color contrast between each alert type and the surrounding text. They're simply too dark. I'm willing to revisit this and play with it more, but I want to ensure that readability and style are maintained.

Will close for now since there is no clear solution in my mind that doesn't have some downside. If you're willing to help, please submit a pull request and we can work to incorporate it.

@mdo mdo closed this Sep 5, 2012

@cvrebert cvrebert pushed a commit that referenced this issue Aug 7, 2013

@ajb ajb Improve accessibility (Section 508, WCAG)
This PR significantly improves Bootstrap's accessibility for users of assistive technology, such as screen readers. Some of the these changes add additional markup to the source examples, but we believe that the sacrifice in readability is worth achieving more widespread usage of accessibility best-practices.

What was done
- Added lots of [WAI-ARIA attributes](http://www.w3.org/WAI/intro/aria)
- Added `.sr-only` helper class, that is only readable by screen readers (and invisible for all other users). This lets us - make progress bars and paginations accessible to screen reading users.
- Advised users to always use label elements. For inline forms, they can hide them with `.sr-only`
- Added 'Skip navigation' link
- Added "Accessibility" section to getting-started.html.

What *wasn't* done
- Contrast issues (twbs#3572)
- Tooltips (twbs#8469)
- Documentation re: usage of icons, since they now live in a separate repo

Major props to all that contributed: @bensheldon, @jasonlally, @criscristina, and @louh. Feel free to chime in, guys, if I've left anything out.
a8d95d4

@stempler stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014

@ajb ajb (less) Improve accessibility (Section 508, WCAG)
This PR significantly improves Bootstrap's accessibility for users of assistive technology, such as screen readers. Some of the these changes add additional markup to the source examples, but we believe that the sacrifice in readability is worth achieving more widespread usage of accessibility best-practices.

What was done
- Added lots of [WAI-ARIA attributes](http://www.w3.org/WAI/intro/aria)
- Added `.sr-only` helper class, that is only readable by screen readers (and invisible for all other users). This lets us - make progress bars and paginations accessible to screen reading users.
- Advised users to always use label elements. For inline forms, they can hide them with `.sr-only`
- Added 'Skip navigation' link
- Added "Accessibility" section to getting-started.html.

What *wasn't* done
- Contrast issues (twbs#3572)
- Tooltips (twbs#8469)
- Documentation re: usage of icons, since they now live in a separate repo

Major props to all that contributed: @bensheldon, @jasonlally, @criscristina, and @louh. Feel free to chime in, guys, if I've left anything out.
91f2a27

@mejackreed mejackreed referenced this issue in projectblacklight/blacklight May 1, 2014

Open

Visual contrast for low vision users is not high enough #896

@stempler stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014

@ajb ajb (less) Improve accessibility (Section 508, WCAG)
This PR significantly improves Bootstrap's accessibility for users of assistive technology, such as screen readers. Some of the these changes add additional markup to the source examples, but we believe that the sacrifice in readability is worth achieving more widespread usage of accessibility best-practices.

What was done
- Added lots of [WAI-ARIA attributes](http://www.w3.org/WAI/intro/aria)
- Added `.sr-only` helper class, that is only readable by screen readers (and invisible for all other users). This lets us - make progress bars and paginations accessible to screen reading users.
- Advised users to always use label elements. For inline forms, they can hide them with `.sr-only`
- Added 'Skip navigation' link
- Added "Accessibility" section to getting-started.html.

What *wasn't* done
- Contrast issues (twbs#3572)
- Tooltips (twbs#8469)
- Documentation re: usage of icons, since they now live in a separate repo

Major props to all that contributed: @bensheldon, @jasonlally, @criscristina, and @louh. Feel free to chime in, guys, if I've left anything out.
82bda25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment