This chapter defines how Board screens should be designed to ensure readability and visual accessibility across different user needs, display conditions, and scaling scenarios.
It complements the Structure and Screen Size chapters by focusing on how information remains readable, distinguishable, and easy to interpret once layout and screen behavior have been defined.
The goal is to provide designers with practical principles for creating screens that remain clear, readable, and usable in real Board contexts.
Established accessibility standards such as WCAG can be used as a baseline reference for principles related to contrast, sizing, and interaction clarity.
1. Understanding Readability in Board Screens
Readability in Board screens refers to how easily users can perceive, scan, compare, and interpret information across different viewing conditions and screen densities.
In this context, accessibility primarily concerns visual and perceptual clarity, ensuring that content, interactions, and meaning remain distinguishable and understandable for different users and display conditions.
Readability in Board environments depends on more than text legibility alone. Typography, contrast, spacing, sizing, alignment, and interaction clarity all contribute to how efficiently users can understand and interact with information.
This chapter focuses on the visual principles that help preserve readability and accessibility across Board screens, while broader layout, hierarchy, and responsiveness behaviors are covered in the Structure and Screen Size chapters.
Screen Element | Readability Requirement |
|---|
KPIs | Immediate recognition and strong visual contrast |
Tables (Data View) | Consistent alignment and easy comparison |
Filters / Buttons | Clear interaction states and recognizable actions |
A screen is readable when it supports all three without friction. If any of this fails, users slow down, misinterpret data, or make avoidable errors.
2. Typography and Scaling
Typography must be designed considering how it behaves across different screen sizes, not only at the design resolution.
As described in the Screen Size, Fit Mode and Scrolling Strategy chapter, Board screens are frequently designed at 1920 px resolution but viewed on smaller displays, causing proportional scaling of text and interface elements. Typography that appears readable at design size may therefore become difficult to read, scan, or interact with under smaller viewing conditions.
For this reason, typography should not be treated as a purely visual choice, but as a functional component that supports readability, perception, comparison, and interaction clarity across different display conditions.
Typography should remain readable after responsive scaling is applied.
As described in the Screen Size chapter, Board screens designed at 1920 px are frequently displayed at smaller resolutions, causing proportional reduction of text and interface elements. Typography choices should therefore account for the smallest expected viewing conditions.
The table below illustrates how typography scales proportionally between common screen sizes.
Font Size @1920 | Font Size @1440 | Result |
|---|
16 px | 12 px | Acceptable |
14 px | 10 px | Secondary text |
12 px | 9 px | Not usable |
This introduces a structural constraint: typography that appears readable at design size may become ineffective in real usage conditions.
As a general guideline:
- Primary and body text should typically remain at or above 14 px after scaling.
- Secondary text should avoid falling below 12 px.
- Interactive text and labels should remain clearly readable under scaled conditions.
Established accessibility standards such as WCAG can be used as a baseline reference, but readability should also be evaluated in the context of dense analytical interfaces and rapid information scanning.
Once readable minimum sizes are preserved, typography can be used to establish visual hierarchy and reinforce the structure of the screen.
The table below provides practical guidance for applying typography across common Board screen components.
These values should not be interpreted as rigid specifications, but as recommended ranges for preserving readability while establishing a clear visual hierarchy across the screen.
Com | Font Size @1440 | Purpose |
|---|
Main Screen Title | 20–24 px | Identifies the screen and establishes the primary entry point. |
Section / Card Title | 16–18 px | Structures content and supports grouping. |
KPI Value | 24–36 px | Highlights key metrics and supports immediate recognition. |
KPI Label | 14 px minimum | Describes the metric while remaining clearly readable. |
Primary Button | 14–16 px | Supports main actions and interaction clarity. |
Secondary Button | 14 px | Supports secondary actions without competing visually. |
Filters / Selections | 14 px minimum | Supports user input and selection. |
Tab Labels | 14 px preferred | Supports navigation and active-state recognition. |
Data View Header | 14 px | Identifies columns and supports table scanning. |
Data View Content | 14 px preferred, 12 px minimum | Supports comparison and readability in dense tables. |
Tooltip / Help | 12 px minimum | Provides supporting information without compromising readability. |
Alerts / Messages | 13–14 px | Communicates feedback and warnings clearly. |
Typography hierarchy helps define structure as much as readability. Larger elements naturally draw more attention, while secondary information should remain visually subordinate without becoming difficult to read.
Text Hierarchy and Usage Across Key Component
Typography should preserve readability across different viewing conditions and screen sizes.
When available space becomes limited, reducing text size to preserve dense layouts may appear effective, but it directly compromises readability, scanning efficiency, and interaction clarity.
Instead of shrinking typography excessively, designers should adapt layout structure, spacing, grouping, scrolling strategies, or content distribution to manage constrained space more effectively.
This is particularly important in data-intensive components such as Data Views, dashboards, and analytical screens, where small reductions in text size can significantly increase cognitive effort and reduce comparison efficiency.
Typography should support both readability and hierarchy. Larger text can reinforce emphasis and structure, while secondary information should remain visually subordinate without becoming difficult to read.
Typography should support both readability and hierarchy.
3. Color Contrast and Visual Clarity
Contrast determines how easily interface elements can be distinguished from one another and from their background.
In Board environments, where users frequently scan tables, compare values, and interpret dense analytical information, sufficient contrast is essential for preserving readability and reducing interpretation effort.
This chapter focuses primarily on color contrast and visual differentiation principles that support readability, accessibility, and interaction clarity across Board screens.
Color contrast plays a critical role in readability. Text, values, icons, borders, and interactive elements must remain clearly distinguishable from their background across different viewing conditions and display qualities.
Insufficient contrast reduces legibility, slows down scanning and comparison, and increases interpretation effort, particularly in analytical environments where users work with dense tables, dashboards, and large datasets.
Contrast should therefore not be treated only as a visual styling choice, but as a functional condition that directly affects how efficiently information can be perceived and interpreted.
Established accessibility standards such as WCAG provide useful baseline references for color contrast. For example, a minimum contrast ratio of 4.5:1 for standard text can be used as a general guideline for preserving readability.
However, readability should also be evaluated in context. In dense analytical interfaces, stronger contrast may be required to support rapid scanning, comparison, and long-term visual comfort.
Color is an effective tool for reinforcing hierarchy, communicating status, and drawing attention to important information. In Board screens, color can help users identify alerts, recognize positive and negative values, distinguish editable fields, and reinforce interaction states.
However, color should not be the only means of conveying meaning.
When users rely exclusively on color to interpret values, states, or actions, interfaces become less robust and more difficult to use across different viewing conditions. Reduced color perception, low-quality displays, scaling, visual fatigue, or color vision deficiencies such as deuteranopia or protanopia can make color-only distinctions difficult to interpret reliably.
For this reason, meaning should remain understandable through additional visual cues such as text labels, icons, borders, patterns, emphasis, or positioning.
For example:
- Selected states should not rely only on background color changes, but also use borders, labels, or structural distinction.
- Positive and negative values should not rely exclusively on green and red coding, but also use directional indicators, symbols, or textual context.
- Interactive elements should remain recognizable through shape, contrast, and structure in addition to color.
Using multiple visual cues does not only support users with color vision deficiencies. It also improves clarity in low-quality displays, poor lighting conditions, printed reports, and situations where users need to interpret information quickly. Designing for accessibility often improves readability and usability for all users.
Using color and patterns to improve chart readability
Color supports readability, hierarchy, and state recognition across Board screens.
The examples below do not define a mandatory visual standard and should not be interpreted as fixed design specifications. They provide reference guidance that can be adapted to different branding systems and application contexts, provided that sufficient contrast, consistency, and readability are preserved.
Core UI colors
Core interface colors should prioritize readability and support a clear distinction between primary content, supporting information, and structural elements.
Use Case | Color | | Hex | Usage |
|---|
Primary text | Dark grey | | #333333 | Text, Data View text |
Secondary text | Medium grey | | #666666 | Labels, descriptions |
Background | White | | #FFFFFF | Main canvas |
Card background | Light grey | | #F5F6F8 | Sections / containers |
Borders / dividers | Light grey | | #E0E0E0 | Structure |
Data View colors
Data Views frequently contain large amounts of information and benefit from consistent visual structure. Color can help users distinguish editable fields, grouped sections, totals, and structural hierarchy.
Use Case | Color | | Hex | Usage |
|---|
Header | Dark blue/grey | | #005A99 | Column headers, main structure |
Group Row | Light blue/grey | | #D4EBFF | Grouped sections, structural hierarchy |
Subgroup Row | Very light blue/grey | | #F0F9FF | Nested grouping (if applicable) |
Data Entry | Soft yellow | | #FFF2C8 | Editable cells |
Highlight | Light neutral / soft accent | | #F5F6F8 | User emphasis (non-structural) |
Subtotal Row | Light blue/grey | | #D4EBFF | Intermediate aggregation |
Total Row | Dark grey/blue | | #005A99 | Final aggregation, strong emphasis |
The example below illustrates how color can be applied within Data Views to support structure, identify editable fields, and reinforce hierarchy without relying exclusively on typography or layout.
Data View Color Hierarchy Example
Buttons and Interaction States
Interactive elements should remain distinguishable through both color and structural feedback. Hover, focus, and selected states should not rely exclusively on color changes.
Use Case | Color | | Hex | Usage |
|---|
Primary action | Blue | | #007ACC | Main buttons |
Primary action (hover) | Darker blue | | #005A99 | Hover feedback |
Secondary action | Neutral grey | | #B0B0B0 | Secondary buttons |
Secondary action (hover) | Darker grey | | #747474 | Subtle hover feedback |
Hover states help communicate interactivity and provide immediate visual feedback when users engage with UI elements. For both primary and secondary actions, hover should introduce a subtle but noticeable change, typically through a darker shade or increased contrast, to indicate that the element is actionable.
In Board, hover states are commonly reinforced through background, border, or elevation changes, while text color remains consistent to preserve readability and visual stability.
Buttons: Interaction States and Hierarchy
KPI & Status colors
Status colors should communicate meaning consistently across the application.
Red should generally be reserved for warnings, errors, or destructive actions, while green should indicate positive outcomes or successful states.
Use Case | Color | | Hex | Usage |
|---|
Positive | Green | | #2E7D32 | +5% ↑ |
Negative | Red | | #C62828 | -3% ↓ |
Warning | Orange | | #EF6C00 | Alerts |
Info | Blue | | #1565C0 | Messages |
Colors should be reinforced through labels, icons, directional indicators, or additional visual cues to avoid relying on color alone.
Good examples include:
- ▲ +5.2% Increase
- ▼ -3.1% Decrease
- ⚠ Warning
- ℹ Information
This approach improves accessibility and ensures that meaning remains understandable even when color differences are difficult to perceive.
The example below illustrates how status colors can be reinforced through labels, icons, and directional indicators to improve recognition and accessibility.
Good examples of Feedback and KPI status colors
- Ensure sufficient contrast between foreground elements and their background.
- Do not rely on color alone to communicate meaning; always pair it with text, icons, patterns, or indicators.
- Maintain consistency of semantic roles across screens and components.
- Validate colors across different contexts (charts, tables, overlays, and dark mode) to ensure consistent readability and meaning.
- Consider users with different viewing conditions, including color vision deficiencies, low-quality displays, and scaled interfaces.
4. Data and Chart Readability
Board screens are primarily used to interpret data and support decision-making. In these contexts, users must be able to quickly scan, compare, and understand numerical values and trends without unnecessary effort.
Poor formatting, inconsistent structures, or overly dense visualizations can significantly reduce clarity, slow down analysis, and increase the risk of misinterpretation.
Numerical values should be easy to scan and compare across rows and columns. This requires consistent formatting across the screen, including the use of currency symbols, percentages, decimal precision, and separators.
Excessive decimals should be avoided, as they add noise without adding meaningful insight. In most cases, limiting values to zero to two decimal places is sufficient.
Alignment also plays a critical role. Numerical values should be right-aligned to support comparison, while textual content is generally easier to scan when left-aligned. Column headers should follow the alignment of the content they represent, helping users establish clear visual associations between labels and values.
Example of Data formatting
BAD Example | Good Formatting |
|---|
1000.5678 | 1.001 |
0.234567 | 23.5% |
1234567 | 1,234,567 |
Charts should simplify complex datasets, not replicate them visually. Overloading a chart with too many series, labels, or competing visual elements reduces its effectiveness and forces users to spend time interpreting instead of understanding.
In most cases, limiting charts to five to seven series improves clarity. Labels should remain readable without zoom, and overlapping elements should be avoided. Whenever possible, direct labeling is preferable to complex legends, as it reduces visual cross-referencing.
In Board environments, readability directly affects decision-making quality. Even small formatting issues can scale into significant interpretation errors when users work with large datasets.
Using prioritization and progressive disclosure to improve chart readability
Charts should prioritize communication over completeness. When additional detail is required, designers should consider progressive disclosure techniques such as drill-downs, filters, or supplementary views rather than increasing visual complexity within a single chart.
5. Clickable components and Interaction clarity
Many readability principles discussed in previous sections also apply to interactive elements. Typography, contrast, spacing, and visual differentiation all contribute to making actions recognizable and easy to use.
Board screens are highly interactive environments where users perform frequent actions such as filtering data, selecting scenarios, and navigating between analytical views.
For this reason, interactive elements must be immediately recognizable and easy to use. If users cannot clearly distinguish interactive elements from static content, interaction becomes slower, confidence decreases, and errors increase.
Interaction clarity is not only about visual appearance, but about ensuring that users understand what they can do and how to do it without hesitation.
Clickable components should provide clear visual affordances that communicate their interactive nature. Users should be able to distinguish actions from information without relying on exploration or trial-and-error.
Buttons, links, filters, selectors, tabs, and other interactive controls should appear visually different from static content through a combination of shape, contrast, labeling, spacing, and state indication.
When interactive elements resemble labels, KPIs, or informational content, users may overlook available actions or hesitate before interacting with the interface.
Clear visual affordances help users identify interactive elements
As a general reference, interactive elements should not fall below 32 × 32 px, while 40 × 40 px provides a more reliable standard for comfortable use.
Spacing is equally important. When actions are placed too close together, users are more likely to make errors. Adequate spacing helps maintain clarity, improves target recognition, and reduces accidental clicks.
Consistency across screens is also essential. Similar actions should always follow the same visual patterns, allowing users to rely on familiar interaction behaviors and reducing the need for relearning.
Users should be able to immediately recognize what is interactive and understand how to engage with it without hesitation.
Size and Spacing: Interaction Best Practices
6. Density and Cognitive Load
Board screens often contain large volumes of information that users need to interpret efficiently. While increasing the amount of information displayed may appear beneficial, excessive density can reduce readability and make it harder to identify what matters.
Readability depends not only on how much information is displayed, but also on how effectively it is organized. When too many elements compete for attention, users require more effort to scan, compare, and interpret information.
Effective screens balance information richness with clarity. Primary content should remain visually prominent, while secondary information should support rather than compete with the main message.
Small design decisions such as spacing, hierarchy, formatting, and contrast have a significant impact on how easily users can understand and act on information.
Data Density and Readability
Scenario | Impacto on User |
|---|
Too much data | Slower analysis and higher cognitive effort |
No visual hierarchy | Difficulty identifying priorities |
Balanced information | Faster understanding and clearer insights |
The amount of information displayed should never compromise the user’s ability to understand and act on information quickly.
For guidance on hierarchy, grouping, and screen structure, refer to the Screen Structure, Hierarchy and Grouping chapter. For layout scaling and scrolling considerations, refer to the Screen Size, Fit Mode and Scrolling Strategy chapter.
Avoid
- Displaying too much information simultaneously.
- Creating multiple competing focal points.
- Treating all information with the same visual importance.
Prefer
- Prioritizing the most relevant information.
- Establishing a clear focal point.
- Using grouping and progressive disclosure to manage complexity.
7. Common Readability Failures
Common readability failures include:
- Text that scales below usable thresholds
Typography that appears acceptable at design resolution may become too small in real usage conditions, especially in dense layouts.
- Low contrast between interface elements and their background
When text, values, controls, or other interface elements do not stand out sufficiently from their background, users must work harder to interpret the screen.
- Excessive density and information overload
When too much information competes for attention at the same time, users require more effort to identify priorities, compare values, and understand the screen.
Overloaded tables, charts, and layouts reduce readability and make interpretation slower and less reliable.
- Weak distinction between static and interactive elements
If users cannot quickly identify what is actionable, interaction becomes slower and less reliable.
Typography size and color contrast
8. Key Takeaways
