High Accessibility Question 169 of 229

What is WCAG contrast and why do product companies ask it?

Frontend Master · Speak this in 60–90 seconds · Faridabad & Delhi NCR

PICTURE THIS: A SENTENCE BECOMES TOKENS

The model does not read letters like humans. It reads these pieces, then predicts the next one.

Simple meaning

Text needs enough contrast against its background so low-vision users can read it, with stricter ratios for small text.

1

WHY — Accessibility instead of guessing?

Why interviewers care about Accessibility:

Accessibility questions separate people

who only read docs from people who shipped.

Keep it short, concrete,

and tied to Frontend work.

Stay structured

Name the idea, why it exists, then one short example.

Close cleanly

End with when you use it and one common pitfall.

2

STEPS — What happens with tokens?

Before the model can read a sentence, it goes through these steps:

  1. 1
    Text needs enough contrast

    against its background so low-vision users can read it, with stricter ratios for small text.

  2. 2
    Design tokens should be

    checked, not guessed from a pretty palette.

  3. 3
    Legal risk and App

    Store reviews make this a real product requirement, not a nice-to-have.

  4. 4
    Context mix

    Attention looks at nearby tokens together.

  5. 5
    Next token

    The model scores what should come next.

  6. 6
    Decode

    IDs turn back into readable text.

3

EXAMPLE — See it in action

Let's see how a real sentence is tokenized (tokens may vary by model):

Input text
“Design tokens should be checked, not guessed from a pretty palette.”
Tokenized output
Designtokensshouldbecheckednot
Token IDs (example)
2987408337471632900

Note: Actual tokens and IDs depend on the tokenizer (e.g., GPT, Llama, etc.).

Key takeaway

Text needs enough contrast against its background so low-vision users can read it, with stricter ratios for small text. Design tokens should be checked, not guessed from a pretty palette.

Chat with us