---
title: Examples
layout: default
class: examples
---

<h2 id="windows-calendar"><a href="#windows-calendar">Windows 10's Calendar</a></h2>

Windows 10's calendar popup, accessible by clicking on the time/date in
the bottom-right corner of the screen, has two problems.

![Windows 10's calendar, with hard-to-read purple text on a dark gray
background](/images/windows-calendar.png)

First, the contrast between the gray background and the purple text has
[a contrast ratio of
1.6](https://leaverou.github.io/contrast-ratio/#%236159ff-on-%23555555),
rendering it completely illegible. Second, it uses exclusively color to
indicate that items are actionable &mdash; which can make it hard for
some people to navigate the interface
([WCAG Guideline 1.4.1: Use of
Color](https://www.w3.org/TR/WCAG/#visual-audio-contrast)).

---
title: Examples
layout: default
class: examples
---

<h2 id="windows-calendar"><a href="#windows-calendar">Windows 10's Calendar</a></h2>

Windows 10's calendar popup, accessible by clicking on the time/date in
the bottom-right corner of the screen, has two problems.

<img alt="Windows 10's calendar, with hard-to-read purple text on a dark
gray background" src="/images/windows-calendar.png" height="300">

First, the contrast between the gray background and the purple text has
[a contrast ratio of
1.6](https://leaverou.github.io/contrast-ratio/#%236159ff-on-%23555555),
rendering it completely illegible. Second, it uses exclusively color to
indicate that items are actionable &mdash; which can make it hard for
some people to navigate the interface
([WCAG Guideline 1.4.1: Use of
Color](https://www.w3.org/TR/WCAG/#visual-audio-contrast)).

Set height of image on /examples.
Set height of image on /examples.
