Where AI gets design wrong

Module 1: What AI already does in your job

Course outline

This lesson isn't in your language yet, so here it is in English.

Quick check

Guess first, no penalty. An AI banner has a light gray headline (#AAAAAA) on white. It looks clean. Does it pass the WCAG contrast rule for normal text?

WCAG (the Web Content Accessibility Guidelines) sets the contrast rule: normal text needs "a contrast ratio of at least 4.5:1", large text 3:1 (W3C). Contrast ratio compares the lightness of text and background. #AAAAAA on white works out to about 2.3:1.

AI design output fails in a few repeat ways: low contrast, garbled text inside images, extra fingers and odd details, colors that drift off brand, and "customer quotes" nobody said. Each one looks fine at thumbnail size.

Worked example

Before and after

One line of an AI banner spec, before and after your check.

AI banner

Headline color: #AAAAAA on white (about 2.3:1)

Now check this AI-made banner yourself.

Spot the mistakes

Tap the three things you'd fix before this ships. Tap one that's fine and you get a hint.

AI banner for a software launch

0 of 3 found

Fill the gaps

Fill the gaps in your check.

Before an AI design ships

I check text contrast . I read every word in the image . Every quote must .

Try it

Your steps, about 2 minutes

0 of 1
  1. 1.Add these checks to your AI brief card: contrast, text at 100%, details, brand, quotes. Then run them on one AI-made design.2 min

Practice

Question 1 of 3

Under WCAG level AA, what contrast ratio does normal-size body text need?

AI tutor

Ask about this lesson and get coached through the Try it task. The tutor is part of Learn Pro.

See Learn Pro