6

I have a site that I'm coding to WCAG 2.0 AA Level compliance and one of the buttons has a colour contrast that does not pass.

Background - #D57405 Foreground - #FFF

Is it possible to use text-shadow to boost the contrast – would that be seen as a pass?

I can serve up a different colour for browsers that don't support text-shadow, but I'd like to try to keep the button the same colour to match brand guidelines for the majority of users. As background - I'm using a web font that doesn't have a bold variation, and I don't want to faux bold it. Also I can’t change the font size to 18pt.

thanks

EDIT - For anyone stumbling across this question:

"the background around the letters can be chosen or shaded so that the letters maintain a 4.5:1 contrast ratio with the background behind them even if they do not have that contrast ratio with the entire background" http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G18

(my use of bold)

Brent Dayman
  • 63
  • 1
  • 7
  • Real world use of this strategy is presented in a [Smashing Magazine article](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/#examples). – cage rattler Jul 19 '17 at 13:33

2 Answers2

4

WCAG is an interesting standard as its very difficult to meet and its difficult to automate tests. Often its important to use critical thinking, and have a solid argument for a position. Your case is a prime example of that.

If I had white text on a white background, with a clear, black outline on the text common sense suggests you would pass. If you are able to render the text clearly with an outline that is contrasted to either the text or the background you'd be able to make a case for passing this test. However, the only viable solution is a much darker outline (you can't go lighter than the white text) which may be visually clashing, so take precaution.

Also, I'd argue that the shadow would need to be clear to ensure that the text is still readable. I'd strongly recommend taking part of this question to User Experience.SE to get their opinion on a white text on an orange background, as they may be able to offer a more redable alternative that keeps with your branding.

Community
  • 1
  • 1
  • Thanks for the response Lego Stormtroopr - yes I was thinking of a darker shadow that would try to balance blending with the background - whilst still creating an acceptable amount of contrast. I will check out the link you provided and post back with the results. I'd vote your answer up - but I have no reputation ... so I will send positive thoughts your way. cheers! – Brent Dayman Jan 14 '14 at 06:17
  • @BrentDayman You don't need rep to upvote an answer if it is helpful, nor to you need rep to accept an answer if it has solved your problem. –  Jan 14 '14 at 06:47
0

Is it possible to invert the Foreground colors ? #000 will pass the AA in normal. But shadow will not be considered by automatic checker.

Franck
  • 1,053
  • 11
  • 17
  • Thanks Franck - that is an option. However I'm trying to avoid making any obvious design changes. I thought adding a drop shadow might be subtle way to 'tweak' rather than change ;) – Brent Dayman Jan 14 '14 at 21:18