quarta-feira, 22 de outubro de 2014

Design Accessibly, See Differently: Color Contrast Tips And Tools

Design Accessibly, See Differently: Color Contrast Tips And Tools


  • By Cathy O’ Connor

  • October 22nd, 2014

  • AccessibilityColor Theory

  • 1 Comment

When we crop your favorite website or check a latest chronicle of your product on your device of choice, take a impulse to demeanour during it differently. Step behind from a screen. Close your eyes somewhat so that your prophesy is a bit dim by your eyelashes.


  • Can we still see and use a website?

  • Are we means to examination a labels, fields, buttons, navigation and tiny footer text?

  • Can we suppose how someone who sees differently would examination and use it?

In this article, I’ll share one aspect of pattern accessibility: creation certain that a demeanour and feel (the manifest pattern of a content) are amply thorough of differently sighted users.


Web page noticed with NoCoffee low-vision simulation1
Web page noticed with NoCoffee low-vision simulation. (View vast version2)

I am a pattern consultant on PayPal’s accessibility team. we consider how a product designs magnitude adult to a Web Content Accessibility Guidelines (WCAG) 2.0, and we examination a company’s pattern patterns and best practices.


I combined a “Designers’ Accessibility Checklist,” and we will cover one of a many impactful discipline on a checklist in this article: creation certain that there is sufficient tone contrariety for all content. I’ll share a strategies, tips and collection that we use to assistance a teams broach designs that many people can see and use yet carrying to customize a experiences.


Our idea is to make certain that all manifest designs accommodate a smallest color-contrast ratio for normal and vast calm on a background, as described in a WCAG 2.0, Level AA, “Contrast (Minimum): Understanding Success Criterion 1.4.3523.”


Who advantages from designs that have sufficient contrast? Quoting from a WCAG’s page:


The 4.5:1 ratio is used in this sustenance to comment for a detriment in contrariety that formula from tolerably low manifest acuity, inborn or acquired tone deficiencies, or a detriment of contrariety attraction that typically accompanies aging.



As an accessibility consultant, I’m mostly asked how many people with disabilities use a products. Website analytics do not exhibit this information. Let’s theory how many people could advantage from designs with sufficient tone contrariety by reviewing a statistics:


Let’s theory that 10% of a universe race would advantage from designs that are easier to see. Multiply that by a series of business or intensity business who use your website or application. For example, out of 2 million online customers, 200,000 would benefit.


Some age-related low-vision conditions7 embody a following:


  • Macular degeneration

    Up to 50% of people are influenced by age-related prophesy loss.

  • Diabetic retinopathy

    In people with diabetes, leaking blood vessels in a eyes can cloud prophesy and means blind spots.

  • Cataracts

    Cataracts clouds a lens of a eye and decreases manifest acuity.

  • Retinitis pigmentosa

    This hereditary condition gradually causes a detriment of vision.

All of these conditions revoke attraction to contrast, and in some cases revoke a ability to heed colors.


Color-vision deficiencies, also called color-blindness, are mostly hereditary and can be caused by side effects of remedy and age-related low-vision conditions.


Here are a forms of color-vision deficiencies8:


  • Deuteranopia

    This is a many common and entails a reduced attraction to immature light.

  • Protanopia

    This is a reduced attraction to red light.

  • Tritanopia

    This is a reduced attraction to blue light, yet not really common.

  • Achromatopsia

    People with this condition can't see tone during all, yet it is not really common.

Reds and greens or colors that enclose red or immature can be formidable to heed for people with deuteranopia or protanopia.


Experience Seeing Differently


Creating a checklist and seeking your designers to use it is easy, yet in use how do we make certain everybody follows a guidelines? We’ve found it critical for designers not usually to intellectually know a why, yet to knowledge for themselves what it is like to see differently. I’ve used a integrate of strategies: immersing designers in interactive use by a Accessibility Showcase, and display what designs demeanour like regulating program simulations.


In mid-2013, we non-stop a PayPal Accessibility Showcase9 (video). Employees get a possibility to knowledge first-hand what it is like for people with disabilities to use a products by interacting with web pages regulating goggles and/or assistive technology. We need that everybody who develops products participates in a tour. The user scenarios for conceptualizing with sufficient tone contrariety embody wearing goggles that copy conditions of low or prejudiced prophesy and tone deficiencies. Visitors try out these use on a PC, Mac or tablet. For mobile experiences, visitors wear a goggles and use their possess mobile devices.


Fun fact: One wall in a showcase was embellished with captivating paint. The wall contains posters, messages and concepts that we wish people to remember. At a finish of a tour, we denote prophesy simulators on a tablet. we perspective a summary wall with a simulators to stress a significance of sufficient tone contrast.


Showcase visitors wear goggles that copy low-vision and color-blindness conditions
Showcase visitors wear goggles that copy low-vision and color-blindness conditions.
Some of a goggles used in a Accessibility Showcase
Some of a goggles used in a Accessibility Showcase.

Software Simulators


Mobile Apps


Free mobile apps are permitted for iOS and Android devices:


  • Chromatic Vision Simulator

    Kazunori Asada’s app simulates 3 forms of tone deficiencies: protanope (protanopia), deuteranope (deuteranopia) and tritanope (tritanopia). You can perspective and afterwards save simulations regulating a camera feature, that takes a screenshot in a app. (Available for iOS6210 and Android6311.)

  • VisionSim

    The Braille Institute’s app simulates a accumulation of low-vision conditions and provides a list of causes and symptoms for any condition. You can perspective and afterwards save simulations regulating a camera feature, that takes a screenshot in a app. (Available for iOS6412 and Android.)13

Chromatic Vision Simulator


The following photos uncover orange and immature buttons noticed by a Chromatic Vision Simulator:


Seen by Chromatic Vision Simulator, a immature and orange buttons uncover normal (C), protanope (P), deuteranope (D) and tritanope (T).14
Seen by Chromatic Vision Simulator, a immature and orange buttons uncover normal (C), protanope (P), deuteranope (D) and tritanope (T). (View vast version15)

This instance highlights a significance of another pattern accessibility guideline: Do not use tone alone to communicate meaning. If these buttons were online icons representing a system’s standing (such as adult or down), some people would have problem bargain it since there is no manifest calm and a shapes are a same. In this scenario, embody manifest calm (i.e. calm labels), as shown in a following example:


The immature and orange buttons are noticed in Photoshop with deuteranopia soothing explanation and normal (text labels added).16
The immature and orange buttons are noticed in Photoshop with deuteranopia soothing explanation and normal (text labels added). (View vast version17)

Mobile Device Simulations


Checking for sufficient tone contrariety becomes even some-more critical on mobile devices. Viewing mobile applications by VisionSim or Chromatic Vision Simulator is easy if we have dual mobile phones. View a mobile app that we wish to exam on a second phone regulating a simulator.


If we usually have one mobile device, we can do a following:


  1. Take screenshots of a mobile app on a device regulating a built-in camera.

  2. Save a screenshots to a laptop or desktop.

  3. Open and perspective a screenshots on a laptop, and use a simulators on a mobile device to perspective and save a simulations.

How’s a Weather in Cupertino?


The following instance highlights a hurdles of regulating a sketch as a credentials while creation essential information easy to see. Notice that a vast calm and confidant calm are easier to see than a tiny calm and tiny icons.


The Weather mobile app, noticed with Chromatic Vision Simulator, shows normal, deuteranope, protanope and tritanope simulations.18
The Weather mobile app, noticed with Chromatic Vision Simulator, shows normal, deuteranope, protanope and tritanope simulations. (View vast version19)

Low-Vision Simulations


Using a VisionSim app, we can copy macular degeneration, diabetic retinopathy, retinitis pigmentosa and cataracts.


The Weather mobile app is being noticed with a upheld condition simulations.20
The Weather mobile app is being noticed with a upheld condition simulations. (View vast version21)

Adobe Photoshop


PayPal’s teams use Adobe Photoshop to pattern a demeanour and feel of a user experiences. To date, a color-contrast ratio checker or tester is not built into Photoshop. But designers can use a integrate of useful facilities in Photoshop to check their designs for sufficient tone contrast:


  • Convert designs to grayscale by going to “Select View” → “Image” → “Adjustments” → “Grayscale.”

  • Simulate tone blindness conditions by going to “Select View” → “Proof Setup” → “Color Blindness” and selecting protanopia form or deuteranopia type. Adobe provides soft-proofs for tone blindness22.

Examples


If you’re conceptualizing with slope backgrounds, determine that a color-contrast ratio passes for a calm tone and credentials tone on both a lightest and darkest partial of a slope lonesome by a calm or text.


In a following instance of buttons, a initial symbol has white calm on a credentials with an orange gradient, that does not accommodate a smallest color-contrast ratio. A integrate of suggested improvements are shown:


  • add a drop-shadow tone that passes (center button),

  • change a calm to a tone that passes (third button).

Checking in Photoshop with a grayscale and deuteranopia proof, a mutated versions with a dump shade and dim calm are easier to examination than a white text.


If we pattern in sizes incomparable than tangible prolongation sizes, make certain to check how a pattern will seem in a tangible web page or mobile device.


Button with gradients: normal view; perspective in grayscale; and as a proof, deuteranopia.23
Button with gradients: normal view; perspective in grayscale; and as a proof, deuteranopia. (View vast version24)

In a following instance of a form, a physique calm and integrate calm pass a smallest color-contrast ratio for both a white and a gray background. we advise teams to always check a tone contrariety of calm and links opposite all credentials colors that are partial of a experience.


Even yet a “Sign Up” integrate passes, if we perspective a knowledge in grayscale or with explanation deuteranopia, specifying that “Sign Up” is a integrate competence be difficult. To urge a affordance of “Sign Up” as a link, underline a integrate or integrate a whole phrase, “New to PayPal? Sign Up.”


Form example: normal view; in Photoshop, a perspective in grayscale; and as a proof, deuteranopia.25
Form example: normal view; in Photoshop, a perspective in grayscale; and as a proof, deuteranopia. (View vast version26)

Because red and immature can be some-more formidable to heed for people with conditions such as deuteranopia and protanopia, should we equivocate regulating them? Not necessarily. In a following example, a red reduction pointer (“-”) indicates purchasing or creation a payment. Money perceived or refunded is indicated by a immature and pointer (“+”). Viewing a pattern with proof, deuteranopia, a colors are not easy to distinguish, yet a shapes are clear and unique. Next to a date, a outline describes a form of payment. Both figure and calm yield context for a information.


Also shown in this example, a rows for purchases and refunds swap between white and light-gray backgrounds. If a same tone calm is used for both backgrounds, determine that all of a calm colors pass for both white and gray backgrounds.


Normal perspective and as a proof, deuteranopia: Check a calm opposite a swapping credentials colors.27
Normal perspective and as a proof, deuteranopia: Check a calm opposite a swapping credentials colors. (View vast version28)

In some applications, form fields and/or buttons competence be infirm until information has been entered by a user. Our pattern superintendence does not need infirm elements to pass, in suitability with a WCAG 2.0’s “Contrast (Minimum): Understanding Success Criterion 1.4.34129:



Incidental: Text or images of calm that are partial of an dead user interface component,… have no contrariety requirement.



In a following instance of a mobile app’s form, a symbol is infirm until a phone series and PIN have been entered. The calm labels for a fields are a really light gray over a white background, that does not pass a smallest color-contrast ratio.


If a patron interprets that form elements with low contrariety are disabled, would they assume that a whole form is disabled?


Mobile app form display infirm fields and symbol (left) and afterwards enabled (right).30
Mobile app form display infirm fields and symbol (left) and afterwards enabled (right). (View vast version31)

The same mobile app form is shown in a distance closer to what we see on my phone in a following example. At a minimum, a calm tone needs to be altered or darkened to pass a smallest color-contrast ratio for normal physique calm and to urge readability.


To assistance heed between labels in fields and user-entered information, try to try choice manifest treatments of form fields. Consider reversing forehead and credentials colors or regulating opposite rise styles for labels and for user-entered information.


Mobile app form example: normal, grayscale and explanation deuteranopia.32
Mobile app form example: normal, grayscale and explanation deuteranopia. (View vast version33)

NoCoffee Vision Simulator for Chrome


NoCoffee Vision Simulator6634 can be used to copy color-vision deficiencies and low-vision conditions on any pages that are ocular in a Chrome browser. Using a “Color Deficiency” environment “achromatopsia,” we can perspective web pages in grayscale.


The following instance shows a same sketch (featuring a call to action) noticed with some of a simulations permitted in NoCoffee. The summary and call to movement are distant from a credentials picture by a many ambiguous black container. This improves readability of a summary and call to action. Testing a tone contrariety of a blue tone in a title opposite plain black passes for vast text. Note that a integrate “Mobile” is not as easy to see since a blue does not pass a color-contrast customary for tiny physique text. Possible improvements could be to change a integrate tone to white and underline it, and/or make a whole word “Read some-more about Mobile” a link.


Simulating achromatopsia (no color), deuteranopia, protanopia regulating NoCoffee.35
Simulating achromatopsia (no color), deuteranopia, protanopia regulating NoCoffee. (View vast version36)
Simulating low manifest acuity, diabetic retinopathy, macular lapse and low manifest acuity and retinitus pigmentosa, regulating NoCoffee.37
Simulating low manifest acuity, diabetic retinopathy, macular lapse and low manifest acuity and retinitus pigmentosa, regulating NoCoffee. (View vast version38)

Using Simulators


Simulators are useful collection to daydream how a pattern competence be noticed by people who are aging, have low-vision conditions or have color-vision deficiencies.


For pattern reviews, we use a simulators to ridicule adult a pattern in grayscale, and we competence use color-blindness filters to uncover designers probable problems with tone contrast. Some of a questions we ask are:


  • Is anything formidable to read?

  • Is a call to movement easy to find and read?

  • Are links discernible from other content?

After training how to use simulators to build consolation and to see their designs differently, we ask designers to use collection to check tone contrariety to determine that all of their designs accommodate a smallest color-contrast ratio of a WCAG 2.0 AA. The checklist includes a integrate of collection they can use to exam their designs.


Color-Contrast Ratio Checkers


The collection we bring in a designers’ checklist are these:


  • WebAIM Color Contrast Checker4239, a browser-based tool, tests tone codes specified in hexadecimal values.

  • The Paciello Group’s Colour Contrast Checker40, an focus permitted for Macs or PCs, tests tone codes specified in RGB values.

There are many collection to check tone contrast, including ones that check live products. I’ve kept a list brief to make it easy for designers to know what to use and to concede for unchanging exam results.


Our idea is to accommodate a WCAG 2.0 AA color-contrast ratio, that is 4.5 to 1 for normal calm and 3 to 1 for vast text.


What are a smallest sizes for normal calm and vast text? The superintendence provides recommendations on distance ratios in a WCAG’s Contrast (Minimum): Understanding Success Criterion 1.4.34129 yet not a order for a smallest distance for physique text. As remarkable in a WCAG’s guidance, skinny musical fonts competence need to be incomparable and/or bold.


Testing Color-Contrast Ratio


You should test:


  • early in a pattern process;

  • when formulating a manifest pattern selection for any product or use (this papers all of a tone codes and a demeanour and feel of a user experience);

  • all new designs that are not partial of an existent manifest pattern guideline.

Test Hexadecimal Color Codes for Web Designs


Let’s use a WebAIM Color Contrast Checker4239 to exam representation body-text colors on a white credentials (#FFFFFF):


  • dark-gray calm (#333333).

  • medium-gray calm (#666666).

  • light-gray calm (#999999).

We wish to make certain that physique and normal calm passes a WCAG 2.0 AA. Note that light gray (#999999) does not pass on a white credentials (#FFFFFF).


Test dark-gray, medium-gray and light-gray regulating a WebAim Color Contrast Checker.43
Test dark-gray, medium-gray and light-gray regulating a WebAim Color Contrast Checker.(View vast version44)

In a tool, we can cgange a light gray (#999999) to find a tone that does pass a AA. Select a “Darken” choice to somewhat change a tone until it passes. By clicking a tone field, we will have some-more options, and we can change tone and luminosity, as shown in a second partial of this example.


Modify colors to pass45
In a WebAim Color Contrast Checker, cgange a light gray regulating a “Darken” option, or use a tone palette to find a tone that passes. (View vast version46)

Tabular information competence be designed with swapping white and gray backgrounds to urge readability. Let’s exam medium-gray calm (#666666) and light-gray calm (#757575) on a gray credentials (#E6E6E6).


Note that with a same background, a middle calm passes, yet a lighter gray passes usually for vast text. In this case, use middle gray for physique calm instead of white or gray backgrounds. Use a lighter gray usually for vast text, such as headings on white and gray backgrounds.


Test light-gray and medium-gray calm on a gray background.47
Test light-gray and medium-gray calm on a gray background. (View vast version48)

Test RGB Color Codes


For mobile applications, designers competence use RGB tone codes to mention manifest designs for engineering. You can use a TPG Colour Contrast Checker49. we will need to implement possibly a PC or Mac chronicle and run it side by side with Photoshop.


Let’s use a Colour Contrast Checker to exam medium-gray calm (102 102 102 in RGB and #666666 in hexadecimal) and light-gray calm (#757575 in hexadecimal) on a gray credentials (230 230 230 in RGB and #E6E6E6 in hexadecimal).


  1. Open a Colour Contrast Checker application.

  2. Select “Options” → “Displayed Color Values” → “RGB.”

  3. Under “Algorithm,” name “Luminosity.”

  4. Enter a forehead and credentials colors in RGB: 102 102 102 for forehead and 230 230 230 for background. Mouse click or add-on past a fields to perspective a results. Note that this mixed passes for both calm and vast calm (AA).

  5. Select “Show details” to perspective a hexadecimal tone values and information about both AA and AAA requirements.

Colour Contrast Analyser, and tone circle to cgange colors50
Colour Contrast Analyser, and tone circle to cgange colors. (View vast version51)

In a example, light-gray calm (117 117 117 in RGB) on a gray credentials (230 230 230 in RGB) does not accommodate a smallest AA contrariety ratio for physique text. To cgange a colors, perspective a tone wheels by clicking in a “Color” name box to cgange a forehead or background. Or we can name “Options” → “Show Color Sliders,” as shown in a example.


Colour Contrast Analyser, with RGB codes. Show tone sliders to cgange any tone that does not accommodate smallest AA guidelines.
Colour Contrast Analyser, with RGB codes. Show tone sliders to cgange any tone that does not accommodate smallest AA guidelines.

In many cases, teenager adjustments to colors will accommodate a smallest contrariety ratio, and comparisons before and after will uncover how improved contrariety enables many people to see and examination some-more easily.


Best Practices


Test for color-contrast ratio, and request a styles and tone codes used for all pattern elements. Create a manifest pattern selection that includes a following:


  • typography for all textual elements, including headings, calm links, physique calm and formatted text;

  • icons and glyphs and calm equivalents;

  • form elements, buttons, validation and complement blunder messaging;

  • background tone and enclosure styles (making certain calm on these backgrounds all pass);

  • the manifest treatments for infirm links, form elements and buttons (which do not need to pass a smallest color-contrast ratio).

Documenting manifest discipline for developers brings several benefits:


  • Developers don’t have to theory what a designers want.

  • Designs can be accurate opposite a manifest pattern selection during peculiarity contrariety cycles, by engineers and designers.

  • A anxiety indicate that meets pattern accessibility discipline for tone contrariety can be common and leveraged by other teams.

Summary


If we are a designer, try out a simulators and collection on your subsequent pattern project. Take time to see differently. One of a stellar designers who reviewed my checklist told me a story about regulating Photoshop’s color-blindness proofs. On his own, he used a proofs to labour a colors used in a pattern for his company’s product. When a redesigned product was released, his CEO thanked him since it was a initial time he was means to see a design. The CEO common that he was color-blind. In many cases, we competence be unknowingly that your colleague, personality or business have assuage low-vision or color-vision deficiencies. If assembly a smallest color-contrast ratio for a sold pattern component is difficult, take a plea of meditative over color. Can we innovate so that many people can collect adult and use your focus yet carrying to customize it?


If we are obliged for enlivening teams to build some-more permitted web or mobile experiences, be prepared to use mixed strategies:


  • Use immersive use to rivet pattern teams and benefit consolation for people who see differently.

  • Show designers how their designs competence demeanour regulating simulators.

  • Test designs that have low contrast, and uncover how slight modifications to colors can make a difference.

  • Encourage designers to test, and request manifest specifications early and often.

  • Incorporate permitted pattern practices into reusable patterns and templates both in a formula and a design.

Priorities and deadlines make it severe for teams to broach on all requests from mixed stakeholders. Be studious and persistent, and continue to rivet with teams to find strategies to broach user use that are easier to see and use by some-more people out of a box.


References


  • “Contrast (Minimum): Understanding Success Criterion 1.4.3523” and the note53, Web Content Accessibility Guidelines 2.0, Level AA

  • “Get a Sneak Peek Into PayPal Accessibility Showcase54,” Victor Tsaran and Cathy O’Connor, PayPal Engineering

  • “Adobe Photoshop55” Accessibility, Adobe

  • “Soft-Proof for Color Blindness (Photoshop and Illustrator)56,” Adobe

  • Web Accessibility in Mind57 (WebAIM)
    • Web-based Color Contrast Checker58 (web-based)

    • Web Accessibility Evaluation Tool59 (WAVE)

    • “Visual Disabilities: Color-Blindness60”


  • TPG Colour Contrast Analyser61 (for Mac and PC), The Paciello Group

  • Color Vision Simulator for iOS6210 and Android6311, Kazunori Asada

  • VisionSim for iOS6412 and Android65, The Braille Institute

  • “NoCoffee Vision Simulator6634, Aaron Leventhal (also see Levanthal’s blog post about it67)

  • “Age-Related Eye Diseases68,” National Eye Institute

  • “Disability and Health69,” World Health Organization

  • “Presbyopia70,” Mayo Clinic

  • “World Population Ageing: 1950–205071,” UN Department of Economic and Social Affairs

Low-Vision Goggles and Resources


(hp, al, il, ml)


Footnotes


  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeevis-large.png

  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeevis-large.png

  3. 3 http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

  4. 4 http://www.who.int/mediacentre/factsheets/fs352/en/

  5. 5 http://www.un.org/esa/population/publications/worldageing19502050/

  6. 6 http://www.mayoclinic.org/diseases-conditions/presbyopia/basics/causes/con-20032261

  7. 7 https://www.nei.nih.gov/healthyeyes/aging_eye.asp

  8. 8 http://webaim.org/articles/visual/colorblind

  9. 9 https://www.youtube.com/watch?feature=player_embeddedv=7MyHZofcNnk

  10. 10 https://itunes.apple.com/us/app/chromatic-vision-simulator/id389310222?mt=8

  11. 11 https://play.google.com/store/apps/details?id=asada0.android.cvsimulatorhl=en

  12. 12 https://itunes.apple.com/us/app/visionsim-by-braille-institute/id525114829?mt=8

  13. 13 https://play.google.com/store/apps/details?id=com.BrailleIns.VisionSimhl=en

  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/10/CVSbuttonsOG-large.jpg

  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/10/CVSbuttonsOG-large.jpg

  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/10/textonbuttons-large.png

  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/10/textonbuttons-large.png

  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/10/weatherCVS-large.png

  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/10/weatherCVS-large.png

  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/10/weathervisionsim-large.png

  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/10/weathervisionsim-large.png

  22. 22 http://help.adobe.com/en_US/creativesuite/cs/using/WS3F71DA01-0962-4b2e-B7FD-C956F8659BB3.html#WS473A333A-7F61-4aba-8F67-5553208E349C

  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/10/buttongradients-large.png

  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/10/buttongradients-large.png

  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/10/logindev-large.png

  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/10/logindev-large.png

  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/10/rowsandicons-large.png

  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/10/rowsandicons-large.png

  29. 29 http://www.w3.org/TR/2014/NOTE-UNDERSTANDING-WCAG20-20140311/visual-audio-contrast-contrast.html

  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2014/10/mobiledisabledfields-large.png

  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2014/10/mobiledisabledfields-large.png

  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2014/10/mobiledisabledfields_bwcc-large.png

  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2014/10/mobiledisabledfields_bwcc-large.png

  34. 34 https://chrome.google.com/webstore/search/NoCoffee%20Vision%20Simulator?hl=engl=US

  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeecolorsim-large.png

  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeecolorsim-large.png

  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeevisionsims-large.png

  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2014/10/nocoffeevisionsims-large.png

  39. 39 http://webaim.org/resources/contrastchecker

  40. 40 http://paciellogroup.com/resources/contrastAnalyser

  41. 41 http://www.w3.org/TR/2014/NOTE-UNDERSTANDING-WCAG20-20140311/visual-audio-contrast-contrast.html

  42. 42 http://webaim.org/resources/contrastchecker

  43. 43 http://www.smashingmagazine.com/wp-content/uploads/2014/10/colorcontrastgrays-large.png

  44. 44 http://www.smashingmagazine.com/wp-content/uploads/2014/10/colorcontrastgrays-large.png

  45. 45 http://www.smashingmagazine.com/wp-content/uploads/2014/10/modifylightgray-large.png

  46. 46 http://www.smashingmagazine.com/wp-content/uploads/2014/10/modifylightgray-large.png

  47. 47 http://www.smashingmagazine.com/wp-content/uploads/2014/10/gray_graybackground-large.png

  48. 48 http://www.smashingmagazine.com/wp-content/uploads/2014/10/gray_graybackground-large.png

  49. 49 http://paciellogroup.com/resources/contrastAnalyser

  50. 50 http://www.smashingmagazine.com/wp-content/uploads/2014/10/ccanalysercolorwheel-large.png

  51. 51 http://www.smashingmagazine.com/wp-content/uploads/2014/10/ccanalysercolorwheel-large.png

  52. 52 http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

  53. 53 http://www.w3.org/TR/2014/NOTE-UNDERSTANDING-WCAG20-20140311/visual-audio-contrast-contrast.html

  54. 54 https://www.paypal-engineering.com/2014/03/13/get-a-sneak-peek-into-paypal-accessibility-showcase/

  55. 55 http://www.adobe.com/accessibility/products/photoshop.html

  56. 56 http://help.adobe.com/en_US/creativesuite/cs/using/WS3F71DA01-0962-4b2e-B7FD-C956F8659BB3.html#WS473A333A-7F61-4aba-8F67-5553208E349C

  57. 57 http://webaim.org

  58. 58 http://webaim.org/resources/contrastchecker/

  59. 59 http://wave.webaim.org

  60. 60 http://webaim.org/articles/visual/colorblind

  61. 61 http://www.paciellogroup.com/resources/contrastAnalyser/

  62. 62 https://itunes.apple.com/us/app/chromatic-vision-simulator/id389310222?mt=8

  63. 63 https://play.google.com/store/apps/details?id=asada0.android.cvsimulatorhl=en

  64. 64 https://itunes.apple.com/us/app/visionsim-by-braille-institute/id525114829?mt=8

  65. 65 https://play.google.com/store/apps/details?id=com.BrailleIns.VisionSimhl=en

  66. 66 https://chrome.google.com/webstore/search/NoCoffee%20Vision%20Simulator?hl=engl=US

  67. 67 http://accessgarage.wordpress.com/2013/02/09/458/

  68. 68 https://www.nei.nih.gov/healthyeyes/aging_eye.asp

  69. 69 http://www.who.int/mediacentre/factsheets/fs352/en/

  70. 70 http://www.mayoclinic.org/diseases-conditions/presbyopia/basics/causes/con-20032261

  71. 71 http://www.un.org/esa/population/publications/worldageing19502050/

  72. 72 http://www.lowvisionsimulationkit.com

  73. 73 http://www.lowvisionsimulators.com/find-the-right-low-vision-simulator

↑ Back to topShare on Twitter



Design Accessibly, See Differently: Color Contrast Tips And Tools
Postado por às

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)