• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

bVisual

  • Home
  • Services
    • How Visio smartness can help your business
    • Visio visual in Power BI
    • Visio Consulting Services
    • Visio Bureau Services
    • Visio Training and Support Services
  • Products
    • Visio Shape Report Converter
    • SS Plus
    • LayerManager
    • visViewer
    • Metro Icons
    • Rules Tools for Visio
    • The Visio 2010 Sessions App
    • Multi-Language Text for Visio
    • Document Imager for Visio
    • multiSelect for Visio
    • pdSelect for Visio
  • Case Studies
    • Case studies overview
    • Visualizing Construction Project Schedules
    • Visio Online Business Process Mapping
    • Nexans Visio Template
    • CNEE Projects, WorldCom
    • Chase Manhattan Bank
  • News
    • Recent news
    • News archive
  • Resources
    • Articles➡
      • ShapeSheet Functions A-Z
      • Comparing Visio for the Web and Desktop
      • Customising Visio Shapes for the Web App
      • Key differences between the Visio desktop and web apps
      • Using the Visio Data Visualizer in Excel
      • Using Visio in Teams
      • Creating Visio Tabs and Apps for Teams with SharePoint Framework (SPFx)
      • Designing Power Automate Flows with Microsoft Visio
      • Innovative uses of Visio Lists
    • Webcasts ➡
      • Visio in Organizations
      • My session and other Visio sessions at MSIgnite 2019
      • Power up your Visio diagrams
      • Vision up your Visio diagrams
      • The Visio 2010 MVP Sessions
    • Visio Web Learning Resources
    • Books➡
      • Mastering Data Visualization with Microsoft Visio
      • Microsoft Visio Business Process Diagramming and Validation
      • Visualizing Information with Microsoft Visio
  • Blog
    • Browse blog articles
    • Visio Power BI articles
    • Visio for Web articles
    • A history of messaging and encryption
  • About us
    • About bVisual
    • Testimonials
    • Bio of David Parker
    • Contact Us
    • Website Privacy Policy
    • Website terms and conditions
    • Ariba Network
You are here: Home / Visio / Testing Visio shape text for WCAG 2.0 pass

Published on September 4, 2019 by David Parker

Testing Visio shape text for WCAG 2.0 pass

The Web Content Access Guidelines (WCAG) 2.0 provides the current recommendations for making web content accessible to users with vision impairment, but how do you test if your Visio shapes pass? There are several web sites out there that provide this capability, but all of them require the HEX values, rather than the RGB or HSL that Visio provides natively. Therefore, I have created a Visio callout shape that can be associated with a target shape to report on the values of each of its main color elements, and provides hyperlinks to automatically check the contrast ratio on WebAIM.

Color Values Shape


The colour formats that can be selected from either the Shape Data window or the right mouse menu are:

  • RGB – The Red, Gren, Blue formula
  • HSL – The Hue, Saturation, Luminosity formula
  • HEX – The web hexadecimal format
  • MAP – The Visio document color map number

This special shape is possible because of the special capabilities of the callout. It can reference the values in cells of the target shape that it is associated with. In this case, there is a list of target cells available from either the Shape Data window or from the right mouse menu:

  • FillForegnd – The fill color if the Solid fill pattern
  • FillBgnd – The second fill colour for non-solid pattern fills
  • LineColor – The colour of the lines
  • Char.Color – The text or font colour
  • TextBkgnd – The optional text background colour

The Target Value Shape Data row then displays the read-only value of the selected Target Cell in the selected Color Format.
The Color Values shape also has a Shape Data or right mouse menu option to Hide Leader Line.
The shape then contains three hyperlinks that opens the WebAIM Contrast Checker:

  • WebAIM (fill vs target font color) – Checks the Color Value shape fill colour vs the target shape text colour
  • WebAIM (fill vs black font color) – Checks the Color Value shape fill colour vs the black text colour, which is the preferred one
  • WebAIM (fill vs white font color) – Checks the Color Value shape fill colour vs the white text colour, which is the second preference if black fails

Check out WebAIMContrast Checker
There is one other hyperlink:

  • Donate to bVisual – Provides the opportunity to encourage me to create more useful shapes

The Color Value shape can easily be used by simply downloading the Color Values stencil into your <documents>/My Shapes folder.
Then simply drag and drop the Color Values shape on to the shape you wish to check, or drop the shape near by and drag the yellow control handle onto the target shape.
Select the Color Format and Target Cell to read the value of, and follow one of the hyperlinks to check the compliance of the selected fill and font colour.
If your shape uses no fill, pattern fill or gradient fill, then consider having a solid text background color.
Note, that this Color Values callout shape can only read the color values of the top-most shape of a group shape, and it does not take any transparency into consideration.
Related articles:
Ensuring High Contrast Text in Visio Shapes
Formatting SharePoint Columns with RGB Color
A big shout-out to my friend Chris Roth, aka VisGuy, for his inspirational article : Get Web Hex Color Values from Visio Shapes

Related

Filed Under: Accessibility, Color, Shape Data, Visio, Visio Online Tagged With: Accessibility, Hyperlinks, Shape Data, WCAG

About David Parker

David Parker has 25 years' experience of providing data visualization solutions to companies around the globe. He is a Microsoft MVP and Visio expert.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

  • LinkedIn
  • Twitter

Recent Posts

  • Pushing Data Visualizer in Visio beyond its limits
  • Pushing Data Visualizer in Visio to the limits!
  • Teams Tuesday Podcast Recording about Visio
  • Linking Data to Visio Shapes in Code
  • Editing Visio Layer Colours with LayerManager

Categories

Tags

Accessibility Add-Ins Connectors Containers Data Export Data Graphics Data Import Data Visualizer Educational Excel GraphDatabase Hyperlinks Icon Sets JavaScript Layers Legend Link Data to Shapes Lists MSIgnite MVP Office365 Org Chart PowerApps PowerBI PowerQuery Processes Shape Data Shape Design ShapeSheet ShapeSheet Functions SharePoint 2013 SQL Teams Themes Validation VBA Video Visio Visio 2007 Visio 2013 Visio for the Web Visio Online Visio Services Visio Viewer Webinar

Footer

bVisual Profile

The UK-based independent Visio consultancy with a worldwide reach. We have over 25 years experience of providing data visualization solutions to companies around the globe.

Learn more about bVisual

  • LinkedIn
  • Twitter

Search this website

Recent posts

  • Pushing Data Visualizer in Visio beyond its limits
  • Pushing Data Visualizer in Visio to the limits!
  • Teams Tuesday Podcast Recording about Visio
  • Linking Data to Visio Shapes in Code
  • Editing Visio Layer Colours with LayerManager

Copyright © 2023 · Executive Pro on Genesis Framework · WordPress · Log in