.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt .. role:: underline ============================ EXT: Graphic Visitor Counter ============================ :Created: 2003-03-01T22:58:10 :Changed: 2006-11-11T14:31:29 :Email: info@informatikserver.de :Info 2: :Info 3: :Info 4: .. _EXT-Accessible-colors: EXT: Accessible colors ====================== Extension Key: **accessible\_colors** Copyright 2006, info@danielmedia.de This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.com .. _Table-of-Contents: Table of Contents ----------------- **EXT: Accessible colors 1** **Introduction 1** What does it do? 1 Requirements 1 Languages 1 Target audience 1 **Functions 2** hexadecimal2rgb ( $hex ): 2 colorbrightness($r,$g,$b): 2 brightnessdifference($foreground,$background): 2 calculatedifference($r,$g,$b,$r2,$g2,$b2): 3 greyscalecolors($r,$g,$b): 3 rgb2lms($rgbarray): 4 lms2rgb($lmsarray) 4 calculatedeficiency($rgbarray,$component): 4 checkhex($hex): 4 achromatopsia($r, $g, $b): 4 **Users manual 5** **Setup 5** **Template.file 5** **6** How do I insert text? 6 How do I insert an image? 6 How do I insert a link? 6 How do I change the style? 7 How do I change the simulated color deficiency? 7 How do I show color information in Frontend? 7 **Known problems 7** **Adminstration 8** **Configuration 8** **To- Do List 8** **Changelog 8** .. _Introduction: Introduction ------------ .. _What-does-it-do: 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: 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: Languages ^^^^^^^^^ The extension is currently available in German. .. _Target-audience: Target audience ^^^^^^^^^^^^^^^ Any developer of a website made in TYPO3 that should emphasise a high accessibility for colorblind people. .. _Functions: Functions --------- .. _hexadecimal2rgb-hex: 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: 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-http-juicystudio-com-services-colourcontrast-php: `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. `_ |img-1| `When you confirm this checkbox in the accessible text or accessible link menue you see something like the following info box in the frontend. `_ |img-2| .. _calculatedifference-r-g-b-r2-g2-b2-http-juicystudio-com-services-colourcontrast-php: `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. |img-3| This infobox shows information about colors of the link menue. .. _greyscalecolors-r-g-b: 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. |img-4| 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) |img-5| . .. _rgb2lms-rgbarray: 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` `_ . It gets the rgb array and returns the lms array. .. _lms2rgb-lmsarray: 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` `_ as well. .. _calculatedeficiency-rgbarray-component: 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` `_ |img-6| 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: 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: 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). .. _Users-manual: Users manual ------------ Load the Extension from the Online Repository. It can be found under frontend plugins or search for the extension-key “accessible\_colors”. Install the Extension with the extension manager. After that you have a new frontend Plugin “Accessible colors”. Insert the Plugin into the content of your page and setup the a text, an image a link or all at once. Done. .. _Setup: Setup ----- page = PAGE page.typeNum = 0 page.10 = TEMPLATE page.10{ template = FILE template.file = fileadmin/\_temp\_/vorlage.html workOnSubparts = DOCUMENT\_BODY subparts.MENULINKS < styles.content.getLeft subparts.CONTENT < styles.content.get subparts.RECHTS < styles.content.getRight } .. _Template-file: Template.file ------------- Save this file under fileadmin/\_temp\_/vorlage.html or change line 6 in the setup accordingly. Test Seite
linkes Menue
Inhalt
rechtes Menue
.. _How-do-I-insert-text: 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. |img-7| .. _How-do-I-insert-an-image: 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. |img-8| .. _How-do-I-insert-a-link: 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. |img-9| .. _How-do-I-change-the-style: 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. |img-4| .. _How-do-I-change-the-simulated-color-deficiency: 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. |img-6| .. _How-do-I-show-color-information-in-Frontend: 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. |img-1| .. _Known-problems: Known problems -------------- There aren't any problems caused by the installation of this extension yet. .. _Adminstration: Adminstration ------------- The extension extends the tt\_content Table with Fields:tx\_accessible colors\_accessibletext,tx\_accessiblecolors\_foregroundhex,tx\_accessi blecolors\_backgroundhex,tx\_accessiblecolors\_showcolorinfo,tx\_acces siblecolors\_text,tx\_accessiblecolors\_alternativegraphictext,tx\_acc essiblecolors\_imagefile,tx\_accessiblecolors\_accessiblelink,tx\_acce ssiblecolors\_alttext,tx\_accessiblecolors\_link,tx\_accessiblecolors\ _linksize,tx\_accessiblecolors\_linkcolor,tx\_accessiblecolors\_linkba ckground,tx\_accessiblecolors\_hovercolor,tx\_accessiblecolors\_showli nkcolorinfo,tx\_accessiblecolors\_additional,tx\_accessiblecolors\_sty leswitcherlabel,tx\_accessiblecolors\_styleswitcher,tx\_accessiblecolo rs\_colordeficiency .. _Configuration: Configuration ------------- To make the plugin work your Template has to be based on content(default). Templates that extend content(default), i.e. Css styled content are fine as well. You don't have to do anything else. .. _To-Do-List: To- Do List ----------- 1.Simulation of images according to a selected color deficiency. 2. Add more color deficiencies such as Protanomalia, Deuteranomalia and Tritanomalia. 3. Include content elements which haven't been created with this extension. .. _Changelog: Changelog --------- 0.0.1: Inital implementation. |img-10| EXT: Accessible colors - 8 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.jpeg .. :align: left .. :border: 0 .. :height: 42 .. :id: graphics3 .. :name: graphics3 .. :width: 404 .. |img-2| image:: img-2.jpeg .. :align: left .. :border: 0 .. :height: 178 .. :id: graphics1 .. :name: graphics1 .. :width: 264 .. |img-3| image:: img-3.jpeg .. :align: left .. :border: 0 .. :height: 344 .. :id: graphics2 .. :name: graphics2 .. :width: 263 .. |img-4| image:: img-4.jpeg .. :align: left .. :border: 0 .. :height: 107 .. :id: graphics4 .. :name: graphics4 .. :width: 321 .. |img-5| image:: img-5.jpeg .. :align: left .. :border: 0 .. :height: 60 .. :id: graphics6 .. :name: graphics6 .. :width: 277 .. |img-6| image:: img-6.jpeg .. :align: left .. :border: 0 .. :height: 114 .. :id: graphics5 .. :name: graphics5 .. :width: 364 .. |img-7| image:: img-7.jpeg .. :align: left .. :border: 0 .. :height: 323 .. :id: graphics8 .. :name: graphics8 .. :width: 568 .. |img-8| image:: img-8.jpeg .. :align: left .. :border: 0 .. :height: 202 .. :id: graphics7 .. :name: graphics7 .. :width: 584 .. |img-9| image:: img-9.jpeg .. :align: left .. :border: 0 .. :height: 332 .. :id: graphics12 .. :name: graphics12 .. :width: 458 .. |img-10| image:: img-10.png .. :align: left .. :border: 0 .. :height: 32 .. :id: Graphic1 .. :name: Graphic1 .. :width: 102