Button text must always be visible. A developer must check button text visibility after any change to CSS or button code. Do not wait for a user to report a problem.
By Pawan Nayar · from the LLOS AI Learning record
Button text must always be visible.
A developer must check button text visibility after any change to CSS or button code. Do not wait for a user to report a problem.
Users have reported invisible button text many times. This happens when CSS variables are not defined. For example, `var(--accent)` might not have a `--accent:` definition. This can make text transparent or white on a light background. Low-contrast colors for disabled buttons also cause problems. Hover states that invert colors can also make text hard to see. A developer must scan for undefined variables after any CSS or button code change. This check must cover all files. Do not wait for a user to find the problem.
A developer changes the CSS for buttons. The developer does not check all button states. A user later tries to use a disabled button. The button text is invisible because of a low-contrast color. The user cannot understand the button's purpose.
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 treat mobile and desktop as two separate apps. They should use media queries to define distinct CSS layouts for each.
A card must never change its size. The content inside the card must fit the card.
An introductory screen should be completely removed from the active layout. This means using a method like `display: none` in web development.
The content area changes size. On desktop, it fills available space and scrolls.
Button text must always be visible. A developer must check button text visibility after any change to CSS or button code. Do not wait for a user to report a problem.