Bill Status Color Coding
AccuArk uses a carefully designed color palette to make bill statuses instantly recognizable in the Bills Browser. Each status has a unique background and text color combination that follows accessibility guidelines for high contrast and readability. This guide provides a complete reference for every status color.
Why Color Coding Matters
When you have dozens or hundreds of bills in the Bills Browser, reading the status text of every row is time-consuming. Color coding lets you scan the entire list in seconds and immediately spot:
- Overdue bills that need urgent attention (red/orange)
- Bills due today or soon (amber/yellow)
- Paid bills that are fully settled (green)
- Cancelled bills that are no longer active (gray)
- Overpaid bills that need review (pink)
Enabling and Disabling Color Coding
The Bills Browser includes a checkbox labeled "Use Color Code for Rows" above the bills grid. When checked, every row in the grid is colored according to its status. When unchecked, all rows use the default white background with black text.
Color coding is applied per-row using the BillStatusStyle system. Each row's background and text color are set based on the status value displayed in the Status column.
Status Color Reference
The following table shows the exact color scheme for each bill status:
| Status | Background | Text Color | Visual Meaning |
|---|---|---|---|
| Paid | Light green (#E8F5E9) | Dark green (#1B5E20) | Positive completion |
| Unpaid | Light blue (#E3F2FD) | Dark blue (#0D47A1) | Normal outstanding state |
| Overdue | Light red/orange (#FBE9E7) | Dark red (#B71C1C) | Requires immediate action |
| Cancelled | Light gray (#EEEEEE) | Medium gray (#616161) | Inactive or voided |
| New | Light indigo (#E8EAF6) | Dark indigo (#283593) | Just entered, not yet actionable |
| Due Today | Light amber (#FFF3E0) | Deep orange (#E65100) | Needs same-day attention |
| Due Soon | Light yellow (#FFF8E1) | Amber (#F57F17) | Upcoming deadline warning |
| Overpaid | Light pink (#FCE4EC) | Dark pink (#880E4F) | Anomaly requiring review |
Color Design Principles
The color palette follows these design principles:
- High contrast — Every combination provides sufficient contrast between background and text for easy reading
- Semantic meaning — Colors align with common associations: green for good, red for urgent, yellow for warning, gray for inactive
- Accessibility — Background colors are light pastels and text colors are dark, ensuring readability for users with various visual abilities
- Distinct from each other — Each status uses a different color family so no two statuses can be confused at a glance
How Colors Apply in the Bills Grid
When the color coding checkbox is enabled, the system applies colors to each row as bills are loaded into the grid. The process works as follows:
- Each bill is loaded with its status value
- For unpaid bills, the system checks how many days until the due date. If the due date is today, the display status becomes "Due today." If the due date is within 14 days, it becomes "Due in X days."
- The display status is passed to the BillStatusStyle system, which returns the appropriate background and text colors
- The colors are applied to the entire row
This means that "Due today" and "Due in X days" bills get their own distinct colors even though the underlying database status may still be "Unpaid." The color coding reflects the display-enhanced status, not just the raw database value.
What to Read Next
- Understanding Bill Statuses — Learn what each status means and how it is assigned
- Navigating the Bills Browser — Overview of all Bills Browser features
- Date Range Filtering and Presets — Filter bills by date to focus on specific periods