In this lesson you
- Read the contrast each failing piece of text measures
- Staged a darker box and a darker grey: two decisions
- Applied both fixes in one new version, measured again
Transcript
What contrast measures
Checking color contrast. Can someone with low vision read this text? What about someone reading on a phone, in bright sunlight? That's the question of the Visibility step, the third step. Can every reader see the text and the controls? Color contrast compares each piece of text with what is behind it, and gives the difference as a ratio. One to one means no difference at all. Black on white is twenty-one to one. Body text needs a ratio of at least four and a half to one. Large text needs three to one, because bigger letters are easier to make out. Large means 18 point, or 14 point bold.
Two decisions, four failures
On this notice, four pieces of text fall short. Failures usually share a cause, such as one box color or one shade of grey. So Proof groups them by cause, and calls each group a decision. Here there are two decisions, so you make two choices, not four. The first is a callout box. White text on a pale teal measures only 1.7 to 1. Proof suggests a darker teal for the box, which brings all three lines to 5.6 to 1, in one swap. You can fix a decision from either side. Change background recolors the box. Change text recolors the words instead. Darkening the box keeps the white text and the brand, so choose Stage rectangle. The box is now marked as staged. Nothing in the file changes until you apply. If you'd rather use one of your own colors, the palette button beside the color shows your organization's brand colors, and colors you've used before. Each swatch is checked against the text, and one that would still fail is crossed out.
Small print that fades
To move on, choose Go to decision 2 of 2. The second decision is the small print at the bottom. Light grey on white, at 2.1 to 1. Sometimes a measurement is wrong, for example when Proof misreads the background behind the text. If Proof ever flags text that a person can read clearly, such as a large heading, choose Large or incidental text. It asks for a reason and records your judgment instead of changing a color. Use it only when you're sure. Here the grey really is too light. Proof suggests a darker grey that passes. Choose Stage.
Apply, and measure again
Both decisions are made. Apply 2 writes both fixes in one new version. Proof then measures the contrast again, on the new file. Every reader can see this document. Only the colors that failed have changed. Everything else on the page is exactly as it was.
Graphics need contrast too
Text isn't the only thing a reader has to see. A separate check, Non-text contrast, covers the shapes that carry meaning. That means the border of a form field, an icon that says something, and each bar, line or slice of a chart. Each of these needs three to one against the color next to it. Decorative shapes don't count. Proof measures form-field borders and chart keys. It also flags pictures that look like charts or maps, because only a person can judge their bars and regions. When something is flagged, the Visibility step shows a Non-text contrast card. It lists each control with its measured ratio, and the test to run. Look at each one on the real page. If they all stand out, choose the button that starts I verified. It says UI and graphics meet 3 to 1 contrast. If one doesn't, it has to be darkened in the source document. Proof can't recolor it for you. Whether color is the only way something is shown, like red words for deadlines, is a different check, Use of color. The lesson on the last checks before certifying covers it. Now you can read a contrast ratio, fix a failing color with one decision, and check the graphics that a machine can't judge alone.
Recap
That's the end of this lesson.
Maple Ridge Community Health, its documents and its people are fictional, made for these lessons.