The post Are you looking for an accessible booking form for scheduling meetings? appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Testing your product or websites to check accessibility helps developers and testers to provide accessible services to the end users. A web accessibility expert can help you test your website and manage compliance. In Addition, to test if your websites are accessible or not, several accessibility testing tools are available that helps in identifying elements with accessibility errors and warnings for potential errors.

Web Accessibility Evaluation Tool (WAVE)

• WAVE is a tool developed by WebAim for evaluating accessibility of web content.
• WAVE is available at https://wave.webaim.org/ and also can be accessed as an Browser extension for Firefox and Chrome.
• WAVE checks for errors based on WCAG 2.1 Level AA and Section 508.
• Wave evaluates single page at a time.
• WAVE helps in identifying the errors related to Headings, Links, Images, Forms, ARIA, Color contrast, structural in detailed and short summary format.
• The results are displayed in the left pane in different section such as Summary, Details, Reference, Structure and Contrast.

• Some of key features of WAVE includes:
  • Wave tool annotates errors inline on your page which allows you to identify which element have errors. Different sets of icons are added on the page to easily identify errors and warnings on webpage.
  • We can view the code simultaneously while checking accessibility errors.

Color Contrast Analyser (CCA)

• The Colour Contrast Analyser (CCA) is a desktop based tool developed by THEPACIELLOGROUP (TPG) available for Windows and MAC OS.
• CCA checks for color contrast errors based on WCAG 2.1 Level AA and AAA.
• CCA helps to check the contrast using the WCAG contrast requirements which are as follows:
  • Standard text (Contrast ratio 4.5:1)
  • Large text (Contrast ratio 3.0:1)
  • 18pt or higher with non-bold font
  • 14pt or higher with bold font

• Some of key features of CCA includes:
  • Value of Color can be set either by using color picker, hex codes or RGB values.
  • Based on the value of colour it displays the contrast ratio and display the results as per WCAG Level AA and AAA.
  • Tool also offers color blindness simulation that helps to understand how specific colour combinations will be viewed by people with Monochromacy, Dichromacy and Trichromacy.

Accessible Name & Description Inspector

• ANDI is a browser based bookmarklet for desktop used for testing accessibility of web content.
• ANDI checks for errors based on WCAG 2.1 and Section 508.
• The results are presented based on different areas of accessibility in Page Analysis section.
• Results covers Element highlights, Accessibility Component and ANDI output which can be viewed as soon as user hover with mouse or use hotkeys with keyboard to check different content on the page.

• Some of key features of ANDI includes:
  • ANDI checks for focusable element, color contrast, heading structure, tables, iframes, hidden element, tabbing order and many more.
  • ANDI tool reveals how a screen reader will read out the interactive elements.

ARC Toolkit

• ARC toolkit is an accessibility testing tool developed by THEPACIELLOGROUP (TPG).
• It is browser based extension available only for Chrome on Windows.
• ARC toolkit checks for errors based on WCAG 2.1 Level AA.
• Accessibility of a single page can be evaluated using the ARC toolkit at any given time.
• ARC toolkit gets added in the browser’s DevTools tab bar.
• Results are segregated based on page elements such as images, headings, tables, etc.

• Some of key features of ARC includes:
  • Test results summary are displayed in the left pane i.e. elements pane.
  • The right pane i.e. Results pane displays results for individual elements.
  • Users can explore the results by selecting an element in the table to view the representation on the web page. It is indicated by and a red dashed outline and supporting text.
  • The results pane shows the related code, short description and recommendation.
  • Accessibility issues found are segregated as Error and Warnings.
  • The toolkit has an additional feature to check page reflow and text spacing by selecting checkbox available in the elements pane.

Accessibility Insight

• Accessibility insight is a tool used for performing accessibility testing on webpages, web applications and Android application.
• Accessibility Insight is available as following extension and tools:
• Chrome and Edge Browser extension to test webpages and web applications.
• Windows Desktop tool to test web applications.
• Windows, MacOS and Linux desktop tool to test Android application.
• Accessibility Insight checks for errors based on WCAG 2.1 Level AA.

• Some of key features of Accessibility insight includes:
  • The tool supports two types of test which is FastPass and Assessment.
  • FastPass is a lightweight two step process which includes Automated checks such as any missing or invalid properties and Tabs stop technique.
  • Automated checks detect some of the common accessibility problems in a web page and web based application quickly keeping in mind the 50 Success criteria.
  • Tab stops provides visual helper and clear instructions that makes it easy to identify issues related to keyboard access such support missing, keyboard traps and incorrect tab order.
  • Assessment includes automated checks and manual tests.
  • In case of automated checks, the tool automatically checks for 50 Success criteria to make the web page compliant with WCAG 2.1 Level AA.
  • In context with manual tests the tool provides visual helper or identifies test instances for users to proceed further.

The above mentioned automated testing tools will help you get kickstarted with the accessibility testing of your product. The test results generated by these tools must be verified manually by accessibility consultants and also get the product tested for accessibility by end users i.e. people with different types of disabilities. This will ensure that your product caters to the needs of all users.

Are you looking for a Web Accessibility Vendor or Web accessibility experts for making your website accessible? The web accessibility testing team at BarrierBreak provides you with expert advice on how to integrate accessibility in your website.

Drop a line to us at sales@barrierbreak.com and we will be happy to connect!

The post 5 Free Must Have Web Accessibility Testing Tools appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

You must have filled many feedback forms, be it in your office, in your school or college, or for any service provider. A simple and user-friendly feedback form is one of the most efficient and economical method for a business to understand its customers. With the benefits that are associated with a feedback form, it becomes very important to ensure that they are accessible to all including people with disabilities. 

If I consider few years back, we had to fill the forms manually and being a person with visual impairment, I was not able to fill the form. I had to always depend on my friends or family while filling any form.   

Technology has rapidly progressed over the days and we are finding feedback forms are now available online. However, in many cases, I have experienced that feedback forms are still not accessible for assistive technology users and the developers have not taken care of accessibility while coding the form. The result, that people like me who use assistive technology still have to be dependent on our friends and family for filling an online feedback form.  

Common problems faced by assistive technology user  

Personally, I have experienced lot of problems while filling and submitting feedback forms online. These are some common problems: 

1. Mandatory fields or instruction related to it are missing or provided at the bottom of the form incorrectly.  
2. Error messages that do not state clear meaning and are difficult to understand. 
3. Assistive Technology users are not aware about errors, which are displayed dynamically on the web/app page.  
4. Form field’s label are not provided or not associated with their respective form fields.  
5. At times Date widget or Time picker is not accessible for assistive technology user.  
6. Users are not aware that form is submitted successfully or not.  

Experience of filling an accessible feedback form 

I was very happy when I had submitted a feedback form successfully without anyone’s help. Below listed are some good points which was coded in the form: 

1. Form was coded very well using native HTML .  
2. Instructions about mandatory fields were provided at the top of the form and was mentioned in the form fields too. 
3. Form fields were labelled appropriately and associated with the respective form fields.  
4. The radio buttons were grouped programmatically. 
5. Alert/Error messages were provided if user hits on submit button failing to fill any mandatory field.  

 As you make your website content accessible for your customers, it is also essential to make the forms, if any, accessible and usable to people with disabilities. A good accessible feedback form would go a long way in helping you understand your customer and also gather important information about your products and services.  

If you would like to make your feedback forms accessible, Email us and allow us to help you make the accessible choice. Think Accessibility, Think BarrierBreak! 

The post Accessible Feedback Form  appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

As a screen reader user, when I was a student we had completed our studies with the help of braille and audio books. Digital products such as mobile, laptop etc. were not available till some time back. Now a days, schools, colleges, universities, eBook publishers etc are providing books in PDF format to their readers. Students with visual impairment, too prefer study material in an accessible PDF format which enables easy access to information.

For students with visual impairment who are using screen reader, let us know more about accessible PDF and how to navigate within. 

PDF reader 

Acrobat reader DC is the preferred application to access the PDF documents and it has lots of in-built accessibility features. It is available for different platforms such as Android, iOS, Mac, Windows etc. Check to know how to use Acrobat Reader on Windows: 

Navigation 

Here is the list of quick navigation keys available to help navigate within the document : 

• If you are aware about page content or after reading the table of content, you can jump directly to specific page with the help of Control+Shift+N 
• Control + F  to find the content within the book. 
• You can jump directly to table by help of T and shift + T to previous table. 

Headings 

Headings are used in the accessible textbook to understand the content structure of the book.  Assistive technology, such as screen reader users can navigate the accessible textbook using any of options given below: 

• You can jump headings by headings within the textbook with the help of H for next and shift + H to previous heading. 
• Press down arrow to access the content below heading. 
• Press insert plus F6” to open the dialog box of headings when using jaws and press insert plus F7” to pool up the list with NVDA. 

Links 

Links used in an accessible PDF textbook help users to navigate page to page and specific chapter using bookmark link. Use the following quick navigation keys to navigate link to link: 

• Use the tab key to navigate the next link and shift +tab to previous link. 
• Press insert plus F7 to pool up the list of links. 
• Press enter to activate the link. 

List 

Similar to headings, you can access the lists in your accessible PDF using the shortcut key L or read through the content using the Up or Down arrow keys. 

Table

An accessible PDF helps interpret the table and provides students with visual impairment with lots of option to access the tabular content. Students can use different keyboard commands to jump to a table, read one cell at a time, listen to the table headers, read entire row, read entire column and even jump to a cell. 

Tip: You can get additional information about jaws screen reader shortcut keys on freedom scientific and nvaccess for NVDA. 

Accessible PDF textbooks or learning materials have truly enhanced the reading experience for students using a screen reader or a student with visual impairment.  

Need help with making your PDF accessible? Write to us at sales@barrierbreak.com.

The post As a student with visual impairment, how to navigate an Accessible PDF textbook? appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Yes, there are few changes that have been made in Web Content Accessibility Guideline (WCAG) 2.1 if we compare it with the WCAG 2.0. Web Content Accessibility Guidelines (WCAG) explains how to make web content accessible for people with disabilities which includes diverse user groups. 

WCAG Timeline 

 WCAG 2.0 was published in 2008 and after 10 years WCAG 2.1 was published in 2018. WCAG 2.1 is not a replacement of WCAG 2.0 but is an extension of WCAG 2.0 with additional success criteria included to cater the needs of different user groups. In WCAG 2.1 there are 17 new success criteria’s included across all the 3 conformance levels. Out of the 17 new success criteria’s: 

• 5 at Level A 
• 7 at Level AA 
• 5 at Level AAA 

The new success criteria’s included in WCAG 2.1 aims at making the web content more accessible for: 

• Mobile users 
• Low vision users 
• Cognitive and learning impaired users  
• Users with motor and visual impairments 

A new guideline has also been introduced in WCAG 2.1 to make it a total of 13 guidelines. The newly added guideline is 2.5 “Make it easier to use inputs other than keyboard.” 

Let us now find out what all has been included in WCAG 2.1! 

• Orientation: As per success criteria 1.3.4 Level AA content and functionality should be available irrespective of user’s device orientation. This requirement was included to cater to the needs of mobile device users, users with mobility impairments and those with low vision.  

• Identify input purpose: As per success criteria 1.3.5 Level AA, forms that collect user data should define the purpose of input fields programmatically. This requirement was included to enable users with cognitive and learning impairments as well as those with motor impairments fill up forms easily. 
• Reflow: As per success criteria 1.4.10 Level AA, all the page content and functionality should be available without requiring users to scroll in 2 dimensions. This requirement was included to make it easier for users with low vision to read and interact with the content without having to scroll horizontally. Reflow also helps to ensure that content is available for mobile device users. 
• Non text contrast: As per success criteria 1.4.11 Level AA, a contrast of 3:1 against the adjacent colors should be present for user interface control state (i.e. hover, focus etc.) and key images (i.e. diagrams, graphs, informative icons etc.). This requirement was included to help low vision users identify user interface components as well as read the information displayed using images with ease. In WCAG 2.0 contrast requirement was present for text and in WCAG 2.1 it has been extended to include non-text content as well. 
• Text spacing: As per success criteria 1.4.12, content and functionality should not be lost when text spacing styles are applied. This requirement was added to cater to the needs of low vision users, dyslexic users, and users with cognitive impairments to help them read the web content with ease.  
• Content on Hover or Focus: As per success criteria 1.4.13 Level AA, content that becomes available on hover or focus should be  
• Dismissible: Content should be dismissible without user having to lose their current position. This will enable users to continue reading the web content. 
• Hoverable and focusable: Content available on hover or focus should be hoverable and focusable itself to help low vision users read the content at high magnification levels.  
• Persistent: Content should not disappear unless users dismiss it. This will provide low vision users and users with learning impairments with more time to read the content.  
• Character key shortcuts: As per success criteria 2.1.4 Level A, web pages should not include single character key shortcuts for carrying out different tasks. This requirement was included to ensure that speech input users don’t end up activating user interface controls while giving voice commands and to make sure that users with dexterity impairments who rely on keyboard interaction might not accidentally activate user interface controls when they unintentionally press a key.  
• Pointer gestures: As per success criteria 2.5.1 Level A, All the functionality of a web page that involves multipoint gestures or path-based gestures should provide users with an alternate means to carry out the task using single point activation controls. This requirement was included to ensure that users with motor impairments and users with cognitive and learning impairments can carry out the complex gestures through an alternate method.  
• Pointer cancellation: As per success criteria 2.5.2 Level A, all the page functionality should be executed on the Up event and not on Down event. If any functionality is executed on Down event, provide users with a mechanism to cancel it. This requirement was included to help users with visual, motor and learning impairments who might get disoriented by a control getting activated unexpectedly on Down event.  
• Label in Name: As per success criteria 2.5.3 Level A, accessible name of a user interface control contains text that is present in the visual label. This requirement was included to help speech input users navigate to and activate user interface controls based on their visual labels and not getting surprised with focus moving to unexpected location on the page when they give voice commands.  
• Motion actuation: As per success criteria 2.5.4 Level A, all the web page functionality that can be activated with device or user motion can also be activated with user interface control. This requirement was included to make sure that users with motor impairments can interact with all the page functionality.  
• Status messages: As per success criteria 4.1.3 Level AA, status messages can be defined programmatically to ensure that assistive technologies can render them without the status messages receiving focus. This requirement was primarily included for users of screen readers who often go unaware about onscreen changes that happen dynamically after they interact with different user interface controls.  

Are you looking to get your website or application reviewed for WCAG 2.1 conformance? Reach out to us at sales@barrierbreak.com. 

The post WCAG 2.0 and 2.1 – What is the difference? appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

According to me, happiness is something we experience when we spend time with our near and dear ones. For example, going to a picnic with office colleagues, meeting friends and family, travelling and experiencing different parts of India

But often the assumption is that people with disabilities can’t enjoy these things independently. I have a visual impairment. Till now, I have mainly travelled with my family.

Well, after joining BarrierBreak, as an Accessibility Tester, I finally realized that even I can enjoy these things and yes with colleagues who have become friends. I have felt a new sense of confidence that I can manage on my own, I can go out on my own.

Experience of Strength in Numbers

As one of my colleagues Kamran said, when we go out to a restaurant as a single visually impaired person, we are often dismissed by the management. But when we go out as a group, we can’t be ignored and above all since we all have varied levels of vision, we all have our strengths and overcome the obstacles with amazing hacks!

So, I would like to share some travel experience, that some of us colleagues enjoyed in the last one year. So you would be wondering, no major feat! But for all of us, it opened the world of travel. So here it is.

We are a group of colleagues and almost all of us are visually impaired.

For sure a question might come to your mind that “How can visually impaired plan a trip without any sighted person and enjoy themselves?”

Yes, it is possible and doable. What it needs is nothing but proper use of technology, intelligence and diligence.

Where did we travel to?

In last one year, we planned three such trips. Would you like to know the destinations? Here it goes:

• Assangoan: A farm house
• Goa: A state of beaches
• Panchgani and Mahabaleshwar: Place filled with natural beauty

How to Plan?

Within our group some of our colleagues have hand on experience on technology, few are good planners, some have great communication skills and others are great entertainers like, singing, playing instruments and many more.

We distribute the work between us and plan to make the trip successful. Which happens every time!

Did we do some activities?

Oh yes, we did. Our visual impairment didn’t stop of from having any of the fun! We didn’t even think about how can we do this, what will be the challenges, nothing!

Everyone has talent like singing, being humorous, writing/telling poetry, etc. But you would be shocked to know that:

• In Assangoan, we enjoyed ourselves with swimming, dancing, , playing games and spent memorable time together
• In Goa, we did Water sports, shopping and much more
• And the last, but not least is Panchgani, it was very exciting trip that we had. We did horse riding, boat ride, laughing competition, and many more. We even enjoyed an accessible museum for.

From this trip we strengthened our bond and have made friends for life.

From my own side, I can tell you, that with each trip, I became more confident, more adventurous and ready to try new things in life.

So to everyone out there with or without a disability, plan a trip not only with friends, family, but also with colleagues. Build Bonds, Overcome mindsets, Do things that you haven’t done before and experience life and happiness!

Need our assistance on technology? We are BarrierBreak 

The post Happiness – Travel with Colleagues & Experience the Strength in Numbers! appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Interactions on the Web are getting more engaging and dynamic these days. In this modern web era, UI designers are coming up with rich interactions for users where information is available to them without requiring the page getting reloaded. Gone are the days where users clicked on a link or button and web page had to be reloaded to show the updated content. Now users click on a link  or button and additional content is available for users then and there!

WAI ARIA comes to the rescue!

WAI ARIA provides  a wide range of roles, states and properties which can be utilized to make the rich web interactions available for persons with disabilities. Assistive technology is used by persons with disabilities and to make the information related to dynamic and rich interactions understandable, it is required to convey the information semantically.

Semantics is used to convey information related to a user interface element’s role, states and properties that a user can understand. For example, if a <div> element is used to structure a button then it needs a role of “button” for a user to understand that it is a button that can be clicked. Next it needs a label (property) to understand what is the purpose of the button. If clicking on the button expands or collapses the content then it needs a state to convey this information.

In this post, we will be talking about one of the ARIA state aria-expanded!

aria-expanded is a WAI-ARIA state which is used to show the expandable and collapsible content. It is used to indicate that the element for which it is specified or another element that it controls is expandable or collapsible. As per the ARIA specification, aria-expanded has the following values:

• true: indicates that the element is expanded
• False: indicates that the element is collapsed
• undefined (default): indicates that the element is neither expanded or collapsed

Some of the roles for which aria-expanded state can be specified include button, Link, combobox etc.

Tip: All the leading browsers and screen reader combinations include support for aria-expanded!

Good code example of aria-expanded

On the BarrierBreak website, we have a navigation menu available in responsive mode. The menu is structured using a button and users can expand the menu to view the list of our services. Below code demonstrates how aria-expanded can be used to convey the menu button’s state for screen reader users:

<button id=”opennav” class=”navbar-toggler pull-xs-right mobile-menu col-style-1 active” type=”button” data-toggle=”collapse” data-target=”#mainNavbarCollapse” aria-expanded=”true” aria-label=”Site Navigation Menu”>

<i class=”vertical-align” aria-hidden=”true”></i>

</button>

Bad Code example of aria-expanded

If a page contains a link which opens in a new window, aria-expanded is specified for the link, which is not required. As aria-expanded defines the state of an element and in the case of links opening a new window the state of the link is not required to be conveyed to users. Below is a code example depicting incorrect use of aria-expanded:

<a href=”https://www.barrierbreak.com/accessibility-barrierbreak/” target=”_blank” aria-expanded=”false”>About Us</a>

Adding aria-expanded to the code is not rocket science! Yes, that’s correct but it needs to be implemented correctly. Check it by inspecting the code and most importantly get it tested by persons with disabilities using assistive technology to ensure that is done right!

Want to know more about our accessibility testing or our accessibility subject matter expert services? get in touch with us at sales@barrierbreak.com or Book an appointment with our account management team and we will be happy to help you!

The post aria-expanded: the Good and the Bad appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Thankfully assistive technology exists to help low vision users browse the web irrespective of the font size, color contrast etc. used on different web pages. Screen magnification software is available for different operating systems to help low vision users to enlarge the computer screen to access and explore any website on their own. Among different screen magnifiers that I have tried over the years, such as Magic, Windows in-built screen magnifier etc. I personally use “ZoomText”, a useful and easy to access screen magnifier cum screen reader software.

ZoomText is basically an integrated computer software program for visually impaired persons specially designed for low vision persons. It is developed by Ai Squared and available on Windows 7/8/10 versions as well as on MAC. It is available in two editions:

• ZoomText magnifier
• ZoomText magnifier/reader which includes a built-in screen reader.

For the purpose of this blog, I will be working with ZoomText 2018 version with Windows 10 operating system.

I prefer to use ZoomText features with the following settings:

• As I have 60% vision impairment, I prefer to access computer on 4x zoom level because I can read, scroll and navigate through the screen easily at this level.
• The toolbar has a checkbox below “zoom level” to switch between current zoom level and 1x view without closing any application which helps me to save time while browsing the web.

I like to use large yellow pointer scheme, green circle cursor scheme and thin red rectangle focus scheme which helps me know where my focus is and to avoid losing focus.

Now that we have explored various features of ZoomText, let’s move ahead and find out about different command keys available for ZoomText. ZoomText has different command keys which are easy to learn and are quite handy for browsing any webpage with a keyboard.

Hotkeys and their functions!

Let’s go through some basic ZoomText hotkeys:

Tip: Click on “ZoomText” application menu button and then select “command keys” to activate ZoomText command keys window!

ZoomText with its variety of features is helping visually impaired persons in performing various tasks on the web easily and comfortably with lesser strain on the eyes. It helps users to navigate interactive elements like links and buttons quickly on a webpage, fill an online form, to send email, to view text displayed using images clearly and many more.

Along with all good features stated above there are couple of limitations that I have come across, which are listed below.

• Sometimes user loses focus while navigating with a keyboard.
• I don’t find its panning to be smooth as compared to Windows in-built magnifier.

Even though ZoomText has several features and it helps low vision users browse the web easily, in few of the situations stated below, I find it difficult to browse the information on web:

• Tooltips or popovers displayed when users hover over an element with a mouse are difficult to read because they tend to disappear when users try to move their mouse pointer over them in order to read the information as the hover is removed.
• Dynamically updating content when a link or button is clicked.
• Content displayed using poor contrast between foreground text, icons, graphs or charts with their background.
• Small size font used to display text created as an image.

I have used ZoomText on both; Windows and MAC and I find ZoomText on MAC has a better visual experience as compared to Windows in terms of clarity and brightness!

After all it can be said that assistive technology software like ZoomText makes browsing websites more easy, comfortable and quick for low vision users. Having worked with different screen magnifiers, my personal pick is ZoomText on a MAC device that has a handy interface, clear visual effect and a variety of useful features! Do share your experience if you have used ZoomText.

The post How can low vision users browse the web using ZoomText? appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

It was a long train journey from Ontario to Alberta where I met Amelia. She was accessing a website on her laptop using high contrast mode. I observed her for a certain period of time. Then out of curiosity tend to ask her why she is using the high contrast mode. In response to my question she said that her eye is sensitive to the colors used on the site due to which she finds it difficult to read the text. On further conversation with her I found that she was having Protanomaly, a type of color-blindness that has reduced sensitivity to red light. I was unaware of the term protanomaly, so I tried to research on it and found that there are so many users who cannot read the text on website easily due to the low contrast ratio.

Every user sees the web page differently. So, now let’s see how various color-blind users see a web page. So here are simulated views with different types of color-blindness:
Normal view:

Simulated view :

• Color blindness that has reduced sensitivity to red light /Protanomaly
• Color blindness that has reduced sensitivity to Green /Deuteronomy

• Color blindness that has reduced sensitivity to Blue /Tritanomaly

After going through the different simulated view you must be feeling that it’s a big task to choose the right colors that would work for widest range of users ?

The next question that comes to mind is what colors should one use? Use colors that contrast well.

So what is the contrast that work for widest range of users?

Web Content Accessibility (WCAG) 2.0 provides parameters  and contrast ratio to determine whether the two colors have sufficient contrast. Lets see what it says.

What WCAG 2.0 says about Color Contrast?

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

So now that we have understood what are the color contrast requirements as per WCAG how can we ensure that the colors we have used meet the specified contrast requirements.

There are tools available that help in checking the contrast between foreground and background. Here are few tools.

Tools Used to check Color Contrast:

So here are some tools that I found handy to check the color contrast ratio:

• Colour Contrast Analyser – by The Paciello Group : It is a desktop application that works on MAC too.
• WebAIM: Color Contrast Checker  : It allows you enter the background and foreground color to check the contrast requirements. It also provides lightness slider to adjust the shades of color to meet the contrast.
• ColorZilla – It’s is a Firefox extension that helps in checking contrast of various colors on website.

These are some of the tools there are many more tools available to check the contrast ratios.

How can we meet Color Contrast?

• Sufficient color contrast: For text to be readable by all user’s sufficient color contrast is required between foreground text with the background. You must be wondering how can we say a particular color has a sufficient contrast with its background?
  Let’s see what all things do we need to check to say our site has sufficient contrast.
  • For text: Every website has lot of content in it. So, lets see the how can we make the text readable for all users without having any difficulties.
     In the below image the pure orange (#F28500) “Accessible Documents” text has a contrast ratio of 2.6:1 with white (#FFFFFF) background. Thus, users with color blindness and low vision users might find it difficult to read such text. We can make the  foreground color shade darker to meet the contrast ratio of 4.5:1. So for the same discussed example, we take a darker shade of orange (#F28500) colour i.e. #B45C15. Now let’s see the contrast. The Strong orange (#B45C15) “Accessible Documents” text has  a contrast ratio of 4.7:1 with white (#FFFFFF) background that meets the requirement of 4.5:1.
  • Text on image: When text is provided on image with low contrast it strains our eyes which may lead to people ignoring the text. Thus, text on image should be avoided but if needed special care must be taken to ensure that the text is both clear and readable to users .
     The text contact us is placed in an image of varying color shades due to which the text is not readable for people with low vision and color blindness. The white (#FFFFFF) text Contact us has a contrast ratio of 1.4:1 with the background image. To make the text clearly visible we can make the background darker or provide a color overlay behind the text to meet the contrast requirements. For the example discussed above we can add an overlay as shown in the screenshot below. The white (#FFFFFF) text Contact us has a contrast ratio of 9.6:1 with the background Dark grey (#454545) overlay.
  • For key images: Key images provide vital information to the user hence it is necessary. Thus, it is important to have sufficient contrast of the key image with the background. Alternatively, we can provide the textual description that meet the contrast ratio besides the key icon. For example, consider the next image button shown below.
     The white (#FFFFFF) next icon has  a contrast ratio of 2.7:1 with green (#4DB052) background. Thus, users with color blindness and low vision users find it difficult to identify the purpose of the icon.
     The black (#000306) alternate text “Next” is provided adjacent to the key image with white (#FFFFFF) that meets the contrast.

• High contrast themes: Provide user with alternative to access  the web-page with different contrast scheme such as  ‘style switcher’ option that will allow the user to select an alternate page style that adheres to the colour contrast ratios.
  For example, the Newzhook website (https://newzhook.com/) provides its users with 2 color schemes i.e. default and high contrast to make its text clear and readable.
                           

• Font size and style: If the website design or presentation doesn’t let you change the colors, then we can increase the font size or make the text bold to meet the contrast ratio of 3:1.Along with the color, the font size and style also play an important role for designing an accessible page. These are the other techniques to meet the contrast ratio of at least 3:1.
  • Text is 14 point and bold.
     The button text “Download App Now!” has a font size less than 14 and the white (#FFFFFF) has a contrast ratio of 4.3:1 with the orange (#D94900) background.Now that the text size of “Download App Now!” is increased to 14pt and made bold it meets the contrast ratio for large text.
  • Text is at least 18 point if not bold .
     In the example below, we see that the strong orange (#CD7012) text Digital Accessibility Consulting has a contrast ratio of 3.5:1 with the white (#FFFFFF) background. Here the text is of size less than 18pt. Hence, we cannot consider as large Text.For the above-mentioned example, we can increase to text size to more than 18pt so as to meet a sufficient contrast with the background.

Color Contrast is vital to accessibility and these are some of the ways where we can meet color contrast with a difference. Do share your views if you have any other techniques to meet the contrast requirement.

The post Meeting Color Contrast with a Difference appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.