Luis Vilela Acuña — Physical Education Teacher & Digital Education

This article presents a CSS-based approach to simulating e-ink displays in educational web applications. By reducing blue light emission through software rendering, teachers can create more eye-friendly digital resources without requiring specialized hardware. The system has been developed using vibe coding methodology and tested in primary education settings, showing potential benefits for students with visual sensitivities, dyslexia, and attention difficulties.

Introduction: The Blue Light Problem in Education

Digital screens have become ubiquitous in educational environments. From virtual learning platforms like Moodle and Edixgal to interactive activities and digital assessments, students spend increasing amounts of time looking at backlit displays. This exposure raises concerns about eye strain, sleep disruption, and long-term visual health, particularly for younger learners whose eyes are still developing.

E-ink displays, like those found in e-readers, offer a solution by reflecting ambient light rather than emitting it directly. However, equipping classrooms with e-ink devices is often impractical due to cost and compatibility limitations. This led us to explore whether CSS—the styling language of the web—could approximate the visual characteristics of e-ink displays while reducing blue light emission from standard screens.

Technical Foundation: How CSS Can Reduce Blue Light

Understanding the Mechanism

A common misconception is that software cannot affect actual light emission from screens. While CSS cannot modify the physical backlight of a display, it directly controls which pixels are rendered and at what color values. When we instruct the screen to display warmer colors with reduced blue components, fewer blue-wavelength photons reach the user's eyes.

Research published in Optometry and Vision Science demonstrated that software-based night mode functions can reduce melatonin suppression by up to 93%, proving more effective than some hardware blue light filtering glasses. This occurs because the rendered pixels themselves emit less blue light, regardless of the backlight's spectral composition.

The CSS E-Ink Filter System

Our approach combines multiple CSS techniques to achieve an e-ink simulation:

•       Sepia filter (15-18%): Adds warm tones that visually counteract blue wavelengths

•       Reduced saturation (75-80%): Decreases color intensity, moving toward grayscale

•       Lowered brightness (92-96%): Reduces overall photon emission

•       Softened contrast (88-92%): Eliminates harsh white/black extremes that cause eye strain

The combined filter declaration looks like this:

filter: sepia(18%) saturate(75%) brightness(96%) contrast(88%);

Additionally, the system employs a carefully selected color palette that avoids pure white (#FFFFFF) and pure black (#000000), instead using warm paper tones (#d4cfc7) and soft ink colors (#252422) that mimic physical e-ink displays.

Scientific Evidence: Does It Actually Work?

To be transparent about the system's effectiveness, we reviewed available research on software-based blue light reduction:

It is important to note that this CSS system does not replace a physical e-ink display. The screen's backlight remains active. However, for educational contexts where true e-ink devices are impractical, this approach offers a meaningful reduction in blue light exposure with zero additional cost.

Inclusive Education: Benefits Beyond Blue Light

Research on e-ink displays and visual accommodations suggests broader benefits for diverse learners:

Students with Dyslexia

Studies show that readers who struggle with phonemic decoding or visual attention read faster on e-ink devices. The reduced contrast and warm tones decrease visual stress, improving reading fluency. Our CSS system replicates these characteristics through soft color contrasts and typography optimized for legibility.

Students with ADHD

Research from John Carroll University found that blue light blocking can improve ADHD symptoms by supporting healthier melatonin release cycles. Students with attention difficulties often experience sensory overload from bright, high-contrast screens. The muted aesthetic of e-ink simulation reduces this visual noise, potentially supporting better focus.

General Visual Sensitivity

For students with migraines, photosensitivity, or autism spectrum conditions involving sensory processing differences, the softer visual presentation can reduce discomfort during extended screen use.

Implementation: Vibe Coding in Practice

This e-ink CSS system was developed using vibe coding methodology—creating educational technology through conversational AI without traditional programming expertise. The process demonstrates how teachers can develop sophisticated digital resources by clearly describing pedagogical needs rather than learning complex coding syntax.

To implement the system in your own educational materials:

1.    Add the e-ink class to your HTML root element: <html class="eink">

2.    Include the CSS file in your document head or embed the styles directly

3.    Apply semantic classes to buttons, inputs, and cards for consistent styling

4.    Optionally add mode toggles (standard, night, dark) for user preference

The system works with Moodle's HTML editor, eXeLearning (which offers greater flexibility for advanced CSS), and any standard web-based learning environment.

Available Display Modes

Conclusion: Technology in Service of Education

The e-ink CSS system represents a practical approach to digital wellness in education. While it cannot fully replicate the benefits of physical e-ink displays, it offers meaningful blue light reduction at no cost, using only the styling capabilities built into every web browser.

More broadly, this project demonstrates the potential of vibe coding for educational innovation. Teachers do not need to become programmers to create sophisticated digital resources. By clearly articulating pedagogical goals and understanding basic implementation principles, educators can leverage AI assistance to build tools tailored to their specific classroom needs.

Technology should serve education, not the reverse. When we design digital experiences with student wellbeing in mind—considering visual comfort, cognitive load, and inclusive accessibility—we create learning environments where the medium supports rather than hinders the educational mission.

Resources

The complete CSS system, documentation, and demo files are available as open source. Teachers are encouraged to adapt and modify the system for their specific needs.

About the author: Luis Vilela Acuña is a Physical Education teacher with the Xunta de Galicia (Spain) and creator of EDUmind, an educational technology ecosystem developed through vibe coding methodology. He provides teacher training in maker spaces, educational robotics, and AI integration in education.