bVisual

Color

Published on by

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:

[Read more…] about Testing Visio shape text for WCAG 2.0 pass

Published on by

Formatting SharePoint Columns with RGB Color

I wrote about ensuring high contrast between text and the background of Visio shapes in my last article. The RGB values actually came from an imported SharePoint list that has a lookup to a list that contains the RGB values of named colours. Having solved how to display the correct text colour for high contrast in Visio, I wanted to the same in a SharePoint column, but first I had to learn how to use the RGB values to format the background colour.

SharePointColumnColourFormat.png


My good friend Chris Roth, aka VisGuy, has already produced Visio ShapeSheet formulas to convert RGB values to Hex values. so I adaptively re-used his idea to create a formula that I could use in a SharePoint calculated column, called Hex.
First, I compressed his multiple User-defined Cells rows into a single formula:

[Read more…] about Formatting SharePoint Columns with RGB Color

Published on by

Ensuring High Contrast Text in Visio Shapes

I am working on a project where I need to ensure high contrast of the text in the Visio shapes for accessibility. At first, I attempted to write my own formula but a colleague pointed my to a website that confirms if the contrast is acceptable ( contrast-ratio.com ), and showed me that a few of my examples failed. So the search was on for a better formula than my own. This lead me to a Stack Exchange answer with just what I was looking for (Formula for Color Contrast between Text and Background). All I needed to do was to convert this into a ShapeSheet formula or two, and then I could apply it to the text inside the shapes.

VisioColorMap



Any text created with Data Graphic Text Callouts cannot have the high contrast formula applied to because they can be moved independent of the background. However any text added with Insert / Field inside the shape changes between black and white with respect to the FillForegnd value in its background.
Following the article above, it is necessary to calculate the lightness, L, of the FillForegnd, and then to check if black or white text is going to provide satisfactory contrast.

[Read more…] about Ensuring High Contrast Text in Visio Shapes

Published on by

Understanding Visio’s Color Formulas

I was recently exploring the ShapeSheet formulas available in Visio that affect colors, and I decided that I needed to make a shape that I can change the fill color, tint, shade and tone of dynamically. This allows me to copy the formulas from a Shape Data row value for pasting into a ShapeSheet cell.

ColorFormulas.gif
[Read more…] about Understanding Visio’s Color Formulas

Published on by

Displaying the Fill and Line Section Values of a shape

A few years ago, I wrote an article about displaying the RGB value of shapes ( see http://blog.bvisual.net/2010/04/22/displaying-the-rgb-values-of-shapes ). I had forgotten about it, but a reader recently asked if it was possible to force the Foregnd field to display the RGB value for the standard color palette values. For example, red is number 2 in the palette, and has a value of RGB(255,0,0). In revisiting the article, I realised that there is a smarter way to display the values, without the need of any macros.

I simply created a master shape that exposes each of the cells in the Fill and Line sections as Shape Data rows. This allows me to enter values in the Shape Data window and see the effect on the shape immediately. So, it was easy to drop one shape, insert text fields, and then use the Array Shapes tool to layout the shapes. Finally, I just entered the the standard color map numbers 0 to 24 in the FillForegnd Shape Data row.

image
[Read more…] about Displaying the Fill and Line Section Values of a shape