30 days of accessibility testing

 Day 18 # 


Colour Contrast Analyser-

Having sufficient contrast between foreground and background colors is an essential part of usability in general and accessibility in particular. The Colour Contrast Analyser (CCA) is a tool that calculates the contrast between two colors and automatically evaluates the returned value against the Web Content Accessibility Guidelines. 

Why use this tool?

Analyze text over top of background images or gradients

Analyze text in images

Get a visual overview of the contrast of your page

How to use the tool

Go to the page to analyze.

Choose to either analyze a section of the page, the visible portion of the page, or the entire page.

Once the results page appears, adjust the WCAG level to evaluate a different conformance level or text size. In general,

For regular-sized text, choose WCAG AA, Small Non-Bold (4.5:1). This is for text smaller than the 18pt. or approximately 1.5em.

For larger text, like headings, choose WCAG AA, Medium-Bold, and Large Non-Bold Text (3:1). This is for bold text larger than 14pt or non-bold text larger than 18pt, or approximately 1.2em and 1.5 em, respectively.

Also, you can adjust the pixel analysis radius to better handle the anti-aliasing of text where the transition from one color to another is more gradual. Note, increasing the pixel radius will increase the computation time.

The text which passes the given conformance level will be outlined in white.

Toggle the mask on and off to see what elements on the underlying page lack enough contrast.

Things to keep in mind when using this tool

The WCAG conformance levels only apply to text, not to other UI elements.

You must understand the size of the text you are trying to analyze because it matters which WCAG criteria you choose.

Tips and Tricks

Almost any type of file you can open in Chrome, including image and PDF files, can be evaluated for text color contrast too. For PDF files you will only be able to evaluate the visible portion of the PDF. To analyze local files you will need to go to your Extensions page and check "Allow access to file URLs" for this extension.

When first installing the extension, you may need to refresh the webpage you wish to analyze for all of the selection options to be available.




Comments

Post a Comment

Popular posts from this blog

Testing Challenges

Image
 Day 30 # Review the complexity of a website's content with the Hemingway app  The Hemingway app is a popular free writing tool created by Adam and Ben Long. Hemingway Editor helps you to edit your writing so that your words are clear and powerful. The app checks your words and sentences which point out areas you can change to make your writing better. Hemingway Editor is easy to blogs, posts, business communication, fiction, essays, or academic papers. It is one of the quickest and easiest ways to find the passive voice and overused adverbs in your texts to make them easier to read.  There is a desktop version of the Hemingway Editor available for Mac and PC, which is quite cheap. But most users will prefer to use the free online writing editor. Hemingway Editor is simple to use.  First, copy your text.  Then go to https://www.hemingwayapp.com and delete the example text.  Paste your text into it and edit the highlighted things in your writing.  Everything is color-coded. Adverbs
Read more

WCAG 2.0 - WEB CONTENT ACCESSIBILITY GUIDELINES

Image
Day 5# 30 days of Accessibility testing Day#5 Read the 12 guidelines of Web Content Accessibility Guidelines (WCAG 2.0.) Write a short post on one of them    The Web Content Accessibility Guidelines (known as WCAG 2.1) are an internationally recognized set of recommendations for improving web accessibility. They explain how to make digital services, websites, and apps accessible to everyone, including users with impairments to their: • vision - like severely sight impaired (blind), sight impaired (partially sighted) or color blind people • hearing - like people who are deaf or hard of hearing • mobility - like those who find it difficult to use a mouse or keyboard • thinking and understanding - like people with dyslexia, autism, or learning difficulties WCAG 2.0 is based on 4 design principles: • Perceivable - Information and user interface components must be presentable to users in ways they can perceive. • This means that users must be able to perceive the information bei
Read more
 Day21 #  looking for invisible keyboard focus when tabbing through a page. I logged in twitter and started tabbing on the twitter page which is navigating on each tab on-page content. Tab-Usability Guidelines Here are 12 design guidelines for using tabs: 1. Use tabs to alternate between views within the same context, not to navigate to different areas. This is the single most important point because staying in place while alternating views is the reason we have tabs in the first place. 2. Logically chunk the content behind the tabs so users can easily predict what they'll find when they select a given tab. 3. Use tabs only when users don't need to see content from multiple tabs simultaneously. 4. Design tabs that are parallel in nature. If the tabs are significantly dissimilar, users will interpret them as site navigation. 5. Highlight the currently selected tab. Make sure that the highlighting is prominent enough so people can tell which tab is selected. 6. The un
Read more