Choose a few colors people can read

Transcript

Four jobs are enough: ink, paper, brand, and the action.

PNTCOG uses gold for the top bar and the welcome line, and light type on the dark photo so the name still reads.

WCAG 2.2 asks for at least 4.5 to 1 for normal text, and 3 to 1 for large text.

If the brand color fails as button text, keep it for the logo and darken the button.

Do not use color as the only sign that something is required or wrong.

Four jobs are enough: ink, paper, brand, and the action.

PNTCOG uses gold for the top bar and the welcome line, and light type on the dark photo so the name still reads.

WCAG 2.2 asks for at least 4.5 to 1 for normal text, and 3 to 1 for large text.

If the brand color fails as button text, keep it for the logo and darken the button.

Do not use color as the only sign that something is required or wrong.

Try this. Write your four color jobs. Check the button label against its background.

• Ink and paper are chosen.
• The button color was checked.
• Errors will use words, not only color.

Quick check

Pick one answer. You get the explanation right away.

Normal text should meet:

At least 4.5 to 1Yes. That is the WCAG 2.2 minimum for body text.2 to 1No. Look at the screen again and pick the choice that matches what you see.No published numberNo. Look at the screen again and pick the choice that matches what you see.

A pale brand color should:

Stay an accent if it fails as textYes. The brand can stay. The words have to be readable.Be used for all paragraphs anywayNo. Look at the screen again and pick the choice that matches what you see.Be outlined in five colorsNo. Look at the screen again and pick the choice that matches what you see.

A red border alone is:

Not enough to mark an errorYes. Add a sentence. Do not rely on color alone.The best labelNo. Look at the screen again and pick the choice that matches what you see.RequiredNo. Look at the screen again and pick the choice that matches what you see.

Mark lesson complete