Skip to main content

Home/ Web Accessibility/ Group items tagged contrast

Rss Feed Group items tagged

Sandra Earl

Designing for Dyslexics: Part 2 of 3 - Accessites.org - 0 views

  • “Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.”
  • Scoptic Sensitivity Syndrome
  • can make high contrast text difficult to read because the words seem to constantly move on the page.
  • ...7 more annotations...
  • anecdotal evidence suggests that, as soon as you reduce the colour contrast, the reading difficulties suffered by dyslexics are alleviated, to some degree, across the board.
  • Contrasts that comply with the thresholds can, and do, create very real problems for dyslexics.
  • t has been my experience that just about every issue within accessible web design is about balance. Skew any one factor too much in favour of a particular user group and you risk disadvantaging another group with opposing needs.
  • What I am suggesting is that, if a colour theme is chosen that conforms to, or exceeds, the W3C colour difference threshold, an alternative, low contrast style sheet should be provided as standard.
  • I then suggested that “disability” be defined as an “inability to pursue an activity because of a medically determinable physical or mental impairment.”
  • suggest that adhering to the Hewlett-Packard colour difference threshold would represent a more balanced approach to the issue of colour contrast. To that end,
  • I’ve developed an alternative color contrast analyser for people to try.
Vernon Fowler

Understanding Success Criterion 1.4.3 | Understanding WCAG 2.0 - 0 views

  • 18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio.
    • Vernon Fowler
       
      http://pxtoem.com/ can be useful for calculating font sizes and comparing.
Vernon Fowler

Contrast ratio in devtools - 0 views

  • To enable it (as of August 2017), you need the following steps: Use Chrome CanaryEnable experiments: chrome://flags/#enable-devtools-experiments
  • From devtools, open settings (F1)Open the experiments panelHit shift seven times (no, I'm not kidding)Check the "Color contrast ratio line in color picker"
Vernon Fowler

Tanaguru Contrast-Finder - 0 views

  •  
    "Find me the good constrasts, for web accessibility, between these two colors"
Vernon Fowler

WebAIM: Link Contrast Checker - 0 views

  • For usability and accessibility, links should be underlined by default.
Vernon Fowler

WebAIM: Color Contrast Checker - 0 views

  • WAVE can analyze contrast ratios for all page elements at once.
  • Colorzilla is an excellent tool for extracting the color value from any page element.
  • You can append ?fcolor=0000ff&bcolor=ff0000 (where the fcolor value is the foreground color and the bcolor value is the background color) to the URL of this page to analyze colors directly from a link or URL (link example).
Sandra Earl

How did you get into Web accessibility? | 456 Berea Street - 0 views

  • Personally I have several reasons for advocating Web accessibility. First of all an idealistic one: I want everybody to be able to use the Web. I am not disabled (yet), so I can (and am often forced to) muddle through sites that are badly built, but a person with a disability may not be able to. Since it is possible to build sites that almost everybody can use, I don’t see why we shouldn’t. Then a few reasons that some may call selfish: I do not have any problems related to motor skills, but I have a really hard time using dropdown and flyout menus, especially hierarchical ones, as well as phony Flash or JavaScript scrollbar imitations. Accessible sites in general either do not contain such obstacles or provide ways around them. Despite having no substantial eyesight problems, I find reading tiny text (below 11px is tiny to me), low contrast text, and reading any size high contrast, light-on-dark text to be very straining. A website designed with accessibility in mind is less likely to cause legibility problems for me. I like being able to use my keyboard to navigate websites. Accessible sites are keyboard friendly since they do not force people to use a mouse.
Sandra Earl

Designing for Dyslexics: Part 1 of 3 - Accessites.org - 0 views

  • The specific needs of dyslexics tend to be overshadowed by the more widely understood needs of the visually impaired. Unfortunately, design decisions that benefit the latter group tend create problems for the former. This is never more evident than in so-called “accessible” text only pages with their emphasis on high contrast and complete lack of images and colour.
  • What is Dyslexia?
  • The word “dyslexia” can be broken down into two parts: “Dys” meaning poor and “lexia” meaning language. Thus dyslexics have difficulties with words. Current theories suggest that
  • ...10 more annotations...
  • it is not a visual problem but a word decoding, or recognition deficit.
  • Our ability to recognise words is thought to be based upon two slightly different “memory skills” — phonetic memory and lexical memory. Dyslexics may have a good phonetic memory — as evidenced by their tendency to spell many words phonetically — but a very poor lexical memory.
  • No two dyslexics demonstrate their disorder in the same manner. It can affect boys and girls equally, across all socioeconomic classes worldwide.
  • “A combination of abilities and difficulties that affect the learning process in one or more of reading, spelling and writing.
  • Accompanying weaknesses may be identified in areas of speed of processing, short-term memory, sequencing and organisation, auditory and/or visual perception, spoken language and motor skills. It is particularly related to mastering and using written language, which may include alphabetic, numeric and musical notation.”
  • the more complex the written language is, the greater the likely percentage of people who will have difficulty reading it.
  • As many as 1 in 10 people in the UK are dyslexic.
  • Worldwide, it is likely that the number of dyslexics is likely to be equal to, if not significantly larger than, the number of visually impaired people.
  • poor short-term memory and organisational skills will mean that site navigation and page organisation become more important.
  • high contrast text difficult or impossible to read. The phrases I’ve heard most often are “the text keeps moving” or “the words seem to dance on the page.”
Vernon Fowler

Juicy Studio: CSS Analyser - 0 views

  •  
    "This service has been provided to allow you to check the validity of your CSS against the W3C's validation service, along with a colour contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement. If the CSS is specified by a URL, it will be loaded into the text area to offer an option to make changes for testing without having to re-upload. "
Vernon Fowler

6 Surprising Bad Practices That Hurt Dyslexic Users - UX Movement - 0 views

  • many dyslexic users are sensitive to the brightness the high contrast colors cause
  • use an off-white color for your background, like a light gray or tan. You can also use a dark gray for your text instead of pure black to cut the glare even more
  • dyslexic users need more breaks between ideas than non-dyslexic users
  • ...4 more annotations...
  • Breaking up your text to one idea per paragraph makes reading a lot easier for both dyslexic and non-dyslexic users.
  • a sans-serif font would allow dyslexic users to see the shapes of letters clearer
  • you shouldn’t use italicized text because they make letters hard to read
  • avoid creating the river effect by using left aligned text, instead of justified text for your paragraphs
Vernon Fowler

10 colour contrast checking tools to improve the accessibility of your design | 456 Ber... - 3 views

  • online tool simulates colour blindness on an image that you upload or on a web page that you specify, while the Photoshop plugin changes the colours of the document you are working on
1 - 20 of 27 Next ›
Showing 20 items per page