A user interface must always be readable. Disabled buttons need high contrast. Text should not break in strange ways. Focus colors should be used carefully.
By Pawan Nayar · from the LLOS AI Learning record
A user interface must always be readable.
Disabled buttons need high contrast. Text should not break in strange ways. Focus colors should be used carefully.
Disabled buttons must always be easy to read. White text on a light grey background is not allowed. Use colors with strong contrast for disabled buttons. For example, dark grey text on a very light blue background works well. Text elements should not break onto a new line alone. This is especially true for emojis or short words next to changing information. Use a special code (` `) to keep words together. Let the design system manage how text wraps. Do not use very bright or neon colors for regular text. Use dark grey text on a soft background for most reading. Bright colors are only for showing success or error messages.
A developer creates a form with a 'Submit' button. When the form is incomplete, the button is disabled. The developer uses light grey text on a white background for the disabled button. A user with low vision cannot read the button text. The developer must change the button to use dark grey text on a light blue background for the disabled state.
Resolved from this lesson's own record — real definitions, not invented for this page.
More from the same record, pulled by shared topic — not written new for this page.
A developer must avoid gray text on light backgrounds. This is a common mistake in AI-generated designs.
The code viewer must be hidden by default. A user clicks a 'View Code' button to see it.
A developer must ensure all content fits within the user's screen. Use `height: 100dvh; overflow: hidden` on the main body element.
Secondary text is hard to read when a designer chooses a color that looks good but is not readable. Labels appear when a developer or designer adds information a user does not need.
A user interface must always be readable. Disabled buttons need high contrast. Text should not break in strange ways. Focus colors should be used carefully.