EXT: Graphic Visitor Counter¶

What does it do?¶

The aim of this extension is to make colors accessible for colorblind people.

This extension adds text, links and images that are accessible for colorblind people. It can tell the color difference and brightness difference of the colors used in texts and links. These information can be displayed in the Frontend.

Additionally this extensions offers some common styleswitchers. Finally you can simulate color deficiencies, such as protanopia, deuteranopia and tritanopia with the help of this extension.

Requirements¶

The extension works best with TYPO3 4.0.2. This is based on Apache 2.0.58, PHP 5.1.6 and MySQL 4.1.15.

Languages¶

The extension is currently available in German.

Target audience¶

Any developer of a website made in TYPO3 that should emphasise a high accessibility for colorblind people.

hexadecimal2rgb ( $hex ):¶

This function converts a hexadecimal value to an array. It checks weather the user input was three or six character for a hexadecimal number. It returns the rgb array.

colorbrightness($r,$g,$b):¶

The colorbrightness is calculated by the formula: ((r-value * 299) + (g-value*587) + (b-value*114)) / 1000. The formula is taken from http://juicystudio.com/services/colourcontrast.php.

This funktion gets three values for red, green and blue and returns the amount of brightness.

brightnessdifference($foreground,$background):¶

This function calculates the difference between two values, which are handed over to the function. It simply subtracts the values. If the result is negative it is converted to a positive value. The return value is the amount of brightness difference.

When you confirm this checkbox in the accessible text or accessible link menue you see something like the following info box in the frontend.

calculatedifference($r,$g,$b,$r2,$g2,$b2):¶

This function calculates the color difference between two colors. It takes six values, two rgb sets each. The formula to calculate the color difference is

(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))

It returns the color difference value.

This infobox shows information about colors of the link menue.

greyscalecolors($r,$g,$b):¶

This function greyscales a color by its rgb values. The grey value of a color calculated by this formula:

grey = 0.299*R + 0.587*G + 0.114*B

taken from http://www1.tip.nl/~t876506/ColorDesign.html .

After cutting the decimal places the grey value of the original color is returned.

When you click the checkbox “switch style” (see above) you can chose between different styles. One of them ist the grey scale view(see following picture)

.

rgb2lms($rgbarray):¶

This function converts an rgb array to a array with long, middle and short values.

The formula is:

long = r * 0.1992 + g * 0.4112 + b * 0.0742;

middle = r * 0.0353 + g * 0.2226 + b * 0.0574;

short = r * 0.0185 + g * 0.1231 + b * 1.355;

taken from :underline:`http://www.fx.clemson.edu/~rkarl/c2g.html <h ttp://service.gmx.net/de/cgi/derefer?DEST=http%3A%2F%2Fwww.fx.clemson. edu%2F%7Erkarl%2Fc2g.html>`_ .

It gets the rgb array and returns the lms array.

lms2rgb($lmsarray)¶

This is the inverse function to rgb2lms. See above. It simply does the opposite. This function is taken from :underline:`http://www.fx.clemson.edu/~rkarl/c2g.html <http://servi ce.gmx.net/de/cgi/derefer?DEST=http%3A%2F%2Fwww.fx.clemson.edu%2F%7Erk arl%2Fc2g.html>`_ as well.

calculatedeficiency($rgbarray,$component):¶

Finally this is the method to simulate the deficiency. You put in the rgb array and the code for the dificiency you want to simulate.

H. Brettel, F. Vienot and J. Mollon found the algorithm to simulate protanopia, deuteranopia and tritanopia. It is only an research because normally you can't tell what a website looks from the eye of a colorblind.

This function takes an array of rgb values and converts it to lms values (see rgb2lms). Then you veryfy the lms value to declare alpha, beta and gamma . The formula is

alpha = m * s – s2 * m2;

beta = s * l - l2 * s2;

gamma = l * m – m2 * l2;

You need these values to re-calculate the lms values for the color deficiency.

L = -1 * (beta * m + gamma * s ) / alpha

M= -1 * (alpha * l + gamma * s) / beta

S = -1 * (alpha* l + beta * m) / gamma

Finally you convert this array back into rgb values (see lms2rgb).

The code is taken from :underline:`http://www.fx.clemson.edu/~rkarl/c2g.html <http://www.fx.clemson.edu/~rkarl/c2g.html>`_

When you confirm the checkbox “simulate deficiency” you are able to chose between four types of color deficiencies. These are protanopia, deuteranopia, tritanopia and achromatopsia.

The last option is to show the page without a deficiency.

checkhex($hex):¶

This function checks the valid input of a hexadecimal number. If the characters are between 0 and F, they're valid. Else they aren't valid. It takes the string of the hexadecimal value and returns a boolean.

achromatopsia($r, $g, $b):¶

This function simulates achromatopsia. It takes three values for rgb and calculates the maximum out of it. The maximum value goes into any of the three values to have the grey tone of a color.

It returns the array with the grey values (each the same).

How do I insert text?¶

Just type in hexadecimal values for the foreground and background color without the hash sign(#). Then type a text of any length.

How do I insert an image?¶

An imagefile (gif, jpg, png) with a maximum filesize of 500 kb can be uploaded. You can type in an alternative text that can be recognized by screenreaders of all kinds. It should shortly explain what people see on the picture.

How do I insert a link?¶

Type in the name of the link. Insert hexadecimal values for the foreground, the background and a value for the hover color. Leave away the # sign. You can change the hover effect, i.e. you can enlarge it font or you can underline it. Just select it from the selectorbox.

How do I change the style?¶

The style can be easily changed by selecting a style from the selctorbox. You have the choice between three hight contrasts and a greyscale view.

WATCH OUT: The chosen style is overwritten from the selected color deficiency if there is any selected.

How do I change the simulated color deficiency?¶

Select a color deficiency from the selectorbox. You have the choice between protanopia, deuteranopia and tritanopia.

WATCH OUT: The chose deficiency overwrites the a styleswitcher you selected before. So either pick a style or simulate a dificiency.

How do I show color information in Frontend?¶

To show the color information of your attributes simply click the checkbox and save your plugin configurations. Re-click and save if you want to remove the information in the Frontend.