WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: contrast ration for very large text

for

Number of posts in this thread: 3 (In chronological order)

From: Angela French
Date: Thu, Oct 05 2017 4:58PM
Subject: contrast ration for very large text
No previous message | Next message →

Hello,
So we are working on a new set of colors for our website and I am testing color combos for contrast. Our h1 headings are set in a background color that runs across the entire page. The new color we'd like to use is #00c18B with white text. This only has a contrast ratio of 2.33:1. However the font is set at 3em which is about 36px on my monitor. Is there any leeway for XL type?

Thank you,





Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;

From: Ben Regis
Date: Fri, Oct 06 2017 2:56AM
Subject: Re: contrast ration for very large text
← Previous message | Next message →

HI Angela

As far as I'm aware, there isn't anything you can do to meet WCAG 2.0 AA other than increase the contrast ratio - automated tools like WAVE and aXE will give a fail with that contrast ratio even with 1000px text. Making it a bit darker at #00A879 will give the required 3:1 ratio.

Kind regards

Ben


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: 05 October 2017 23:59
To: WebAim Forum ( = EMAIL ADDRESS REMOVED = ) < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] contrast ration for very large text

Hello,
So we are working on a new set of colors for our website and I am testing color combos for contrast. Our h1 headings are set in a background color that runs across the entire page. The new color we'd like to use is #00c18B with white text. This only has a contrast ratio of 2.33:1. However the font is set at 3em which is about 36px on my monitor. Is there any leeway for XL type?

Thank you,





Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;

From: Karl Brown
Date: Fri, Oct 06 2017 8:42AM
Subject: Re: contrast ration for very large text
← Previous message | No next message

AA compliance means 3:1 for large text (14pt if bold, 18pt if not bold, not
sure on the pixel sizes) or 4.5:1 for all other text. The only two
exceptions would be "incidental text" (e.g., decorative text) or logos.

I'd go with a darker text colour on white. I usually suggest going for
4.5:1 if you can just so you don't have to worry about the colour being
used for smaller fonts or users making the font size smaller in their
browser.

On Fri, Oct 6, 2017 at 9:56 AM, Ben Regis < = EMAIL ADDRESS REMOVED = > wrote:

> HI Angela
>
> As far as I'm aware, there isn't anything you can do to meet WCAG 2.0 AA
> other than increase the contrast ratio - automated tools like WAVE and aXE
> will give a fail with that contrast ratio even with 1000px text. Making it
> a bit darker at #00A879 will give the required 3:1 ratio.
>
> Kind regards
>
> Ben
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Angela French
> Sent: 05 October 2017 23:59
> To: WebAim Forum ( = EMAIL ADDRESS REMOVED = ) <
> = EMAIL ADDRESS REMOVED = >
> Subject: [WebAIM] contrast ration for very large text
>
> Hello,
> So we are working on a new set of colors for our website and I am testing
> color combos for contrast. Our h1 headings are set in a background color
> that runs across the entire page. The new color we'd like to use is
> #00c18B with white text. This only has a contrast ratio of 2.33:1.
> However the font is set at 3em which is about 36px on my monitor. Is there
> any leeway for XL type?
>
> Thank you,
>
>
>
>
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > at http://webaim.org/discussion/archives
> >
>
> > > > >



--
Karl Brown
Twitter: @kbdevelops
Skype: kbdevelopment

Professional Certificate Web Accessibility Compliance (Distinction),
University of South Australia, 2015