Accessibility issues detected on noplisu.com
Evolize inspected 4 publicly accessible pages on noplisu.com and detected 67 automatically identifiable accessibility findings. 5 findings were classified as critical or high priority. The findings map to 5 WCAG success criterions. The sections below show affected pages, technical evidence and recommended remediation. The most frequent issues involve page has no main landmark, hidden elements can still receive keyboard focus, scrollable region must have keyboard access.
67findings detected
5critical + high
4pages inspected
30 Aug 2026assessed
Independent public assessment. noplisu.com is not necessarily affiliated with or a customer of Evolize.
01 · Accessibility summary
Evolize inspected 4 publicly accessible pages on noplisu.com and detected 67 automatically identifiable accessibility findings. 5 findings were classified as critical or high priority. The findings map to 5 WCAG success criterions. The sections below show affected pages, technical evidence and recommended remediation. The most frequent issues involve page has no main landmark, hidden elements can still receive keyboard focus, scrollable region must have keyboard access.
02 · Priority findings
03 · WCAG criteria affected
| Criterion | Name | Level | Findings | Pages |
|---|---|---|---|---|
| 1.4.3 | Contrast (Minimum) | AA | 57 | 4 |
| 1.3.1 | Info and Relationships | A | 4 | 4 |
| 2.1.1 | Keyboard | A | 3 | 2 |
| 2.4.3 | Focus Order | A | 2 | 4 |
| 2.5.8 | Target Size (Minimum) | AA | 1 | 2 |
Absence of a criterion here does not indicate conformance with it — only that no automatically detectable issue was found for it.
Continuous monitoring
A scan shows today's exposure. Monitoring shows what changes next.
Evolize continuously rescans public websites, detects newly introduced or recurring accessibility issues, tracks remediation and verifies fixes.
04 · All detected findings
High
Page has no main landmark
ComponentRef WQUXEP
No <main> or role=main region is present, so screen reader users cannot jump to primary content.
Affected page
https://noplisu.com/Element
html > bodyAccessible nameGrzegorz LisowskiProjectsSkillsBlogGet In TouchProjectsSkillsBlogGet In TouchHello, I'mGrzegorz Lisowski🚀Full-Stack Developer🕹️AR/VR SpecialistCrafting exceptional digital experiences since 2013Let's connect🚀View My Work📝Read ArticlesFeatured ProjectsA showcase of my work spanning full-stack development, AR/VR experiences, and open source contributionsAll Projects (10)Open Source (2)AR/VR (1)Full Stack (5)Business (1)Games (1)Show Featured OnlyFeaturedFractal EngineOPEN SOURCEIN PROGRESSMinimal CLI coding assistant with LLM tool calling for exploring and editing codebasesPythonLLMOpenRouterTool Calling+2 more📁GitHubImpact: Demonstrates a from-scratch agent loop and tool-calling architecture in a small Python codebase, runnable locally against any project without an IDE pluginFeaturedBookmanticFULL STACKIN PROGRESSFind books by describing what you want to read, not by title or keywordRAGAITypescriptDevOps+2 more🌐Live Demo📁GitHubImpact: Lets readers discover books by intent and mood—queries like "hopeful sci-fi" or "startup biography" surface semantically relevant titles from ~45,000 indexed books, with similar-book recommendations for deeper explorationFeaturedGOBL KSeFOPEN SOURCECOMPLETEDPolish Electronic Invoicing Integration for Global JSON Invoicing StandardGoJSON SchemaKSeF APIFinancial Compliance+1 more📁GitHubImpact: Enables businesses to comply with Polish electronic invoicing regulations through standardized JSON formatFeaturedAmenitizFULL STACKCOMPLETEDHotel Management PlatformRuby on RailsGoReactStorybook+2 more🌐Live DemoImpact: Contributed to full-stack development using Ruby on Rails, Go, and React, implementing microservices architecture and protobuf communicationFeaturedCompound Interest CalculatorFULL STACKCOMPLETEDInteractive Finance Calculator for Compound Interest CalculationsReactTypeScriptViteTailwind CSS🌐Live Demo📁GitHubImpact: Provides users with an intuitive tool for calculating compound interest, helping with financial planning and investment decisionsRubber DuckyFULL STACKCOMPLETED3D Web Application with Docker DeploymentHTML5WebGLGLTFDocker+2 more🌐Live Demo📁GitHubImpact: Demonstrates containerized web application deployment and 3D graphics rendering capabilities in modern browsersFeaturednopaperworkBUSINESSMAINTENANCEBusiness Management PlatformRuby on RailsEmber.jsBootstrap 5KSeF Integration+2 more🌐Live DemoImpact: Led full-stack modernization from Bootstrap 3 to Bootstrap 5 and Rails 7.x, implementing Polish e-Invoicing (KSeF) integration and API documentationJulinek ARAR VRARCHIVEDAugmented Reality Circus GameUnityC#ARKitiOS Development+1 moreImpact: Developed AR educational game using Unity and ARKit, demonstrating expertise in mobile AR development and iOS App Store deploymenthitdeaFULL STACKARCHIVEDCollaborative Idea Management PlatformRuby on RailsEmber.jsApache CordovaMicroservices+2 moreImpact: Enabled organizations to gather and process ideas in a creative, productive way20 Questions GameGAMEARCHIVEDAI Logic Game with Machine LearningRuby on RailsJavaScriptMachine LearningRSpec+1 moreImpact: Interactive AI game demonstrating machine learning concepts in an engaging formatInterested in My Work?Check out my GitHub for more projects and contributions, or let's discuss your next project📁View GitHub💬Start a ProjectTechnical ExpertiseA decade of experience building robust applications across the full technology stackCertificatesBackend developmentFrontend developmentVR/AR interactive experiencesMobile developmentTesting & code qualityDevOpsProject ManagementProfessional CertificationsHubSpot Academy - Inbound Marketing CertifiedView Certificate →HubSpot certification covering applying inbound marketing techniques to creating content using social promotion, converting and nurturing leads and marketing to customersIBM Full Stack Software Developer Professional Certificate (V5)View Certificate →Comprehensive full-stack development certification covering frontend, backend, databases, and deployment technologies.Containers & Kubernetes EssentialsView Certificate →Containerization and orchestration certification covering Docker, Kubernetes, and modern deployment strategies.Introduction to HTML, CSS, & JavaScriptView Certificate →Coursera certification covering fundamental web development technologies including HTML structure, CSS styling, and JavaScript programming concepts.Software Engineering EssentialsView Certificate →Comprehensive certification covering software engineering principles, development methodologies, and best practices for building scalable applications.Introduction to Cloud ComputingView Certificate →Foundational knowledge of cloud computing concepts, services, and deployment models across major cloud platforms.Git and GitHub EssentialsView Certificate →Version control mastery covering Git fundamentals, GitHub workflows, and collaborative development practices.Front-end Development with React V2View Certificate →Advanced React development skills including component architecture, state management, and modern React patterns.Software Developer Career Guide and Interview PreparationView Certificate →Professional development certification covering career strategies, interview techniques, and industry best practices.Generative AI Essentials for Software DevelopersView Certificate →Cutting-edge certification covering AI integration, machine learning concepts, and generative AI tools for software development.Full Stack Application Development Capstone Project V2View Certificate →Hands-on project certification demonstrating end-to-end full-stack application development and deployment skills.Full Stack Software Developer Assessment V2View Certificate →Comprehensive assessment certification validating full-stack development competencies and technical skills.Application Development using Microservices and ServerlessView Certificate →Advanced architecture certification covering microservices design, serverless computing, and scalable application development.Developing Applications with SQL, Databases, and DjangoView Certificate →Backend development certification covering database design, SQL optimization, and Django framework mastery.Python Project for AI and Application DevelopmentView Certificate →Python development certification covering AI integration, machine learning, and advanced application development techniques.Python for Data Science and AIView Certificate →Data science certification covering Python programming, data analysis, machine learning, and AI implementation.Node and Express EssentialsView Certificate →Server-side JavaScript certification covering Node.js runtime, Express framework, and backend API development.Server-side frameworksRuby on RailsRuby on Rails is a web application framework written in the Ruby programming language. It emphasizes convention over configuration and enables developers to build robust and scalable applications rapidly.SinatraSinatra is a lightweight web application framework for Ruby. It prioritizes simplicity and minimalism, making it well-suited for small to medium-sized projects and APIs.Node.jsNode.js is a server-side JavaScript runtime environment. It enables the execution of JavaScript code outside a web browser. It allows for scalable and efficient development of networked applications.Apache kafkaApache Kafka is a distributed streaming platform. It facilitates the building of real-time data pipelines and streaming applications. It offers high-throughput, fault tolerance, and horizontal scalability.Database managementMySQLMySQL is an open-source relational database management system (RDBMS). It efficiently stores and retrieves data. It is widely used for web applications and other software development projects.PostgresqlPostgreSQL is a powerful open-source relational database management system (RDBMS) known for its extensibility, stand…[truncated by Evolize: exceeded D1 value limit]
Markup
<body class="__className_f367f3"><nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-white/98 dark:bg-gray-900/98 backdrop-blur-lg"><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex justify-between items-center h-16"><a class="flex items-center space-x-2 group" href="/"><img src="/logo.svg" alt="Grzegorz Lisowski" width="40" height="40" class="transition-opacity duration-300"><span class="font-bold text-lg sm:text-xl transition-colors duration-300 text-gray-800 dark:text-gray-200">Grzegorz Lisowski</span></a><div class="hidden md:flex items-center spac…
How to fixAdd a <main> element or an element with role="main" to define the primary content region of the page, allowing screen reader users to jump to it.
Affected pages
/ /blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsHigh
Hidden elements can still receive keyboard focus
ComponentRef PHGVGP
An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
div > nav > div > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1)Accessible nameToggle dark mode
Markup
<button class="p-2 rounded-lg transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300" aria-label="Toggle dark mode"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg></button>
How to fixKeep this element out of the tab order while its containing region is hidden — remove it from focus (for example tabindex="-1"), or apply the inert attribute to the hidden container where supported. Restore normal focusability when the region becomes visible.
Affected pages
/blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsComponentRef 8BGI7F
An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.
Affected page
https://noplisu.com/Element
body > nav > div > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1)Accessible nameToggle dark mode
Markup
<button class="p-2 rounded-lg transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300" aria-label="Toggle dark mode"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg></button>
How to fixTo fix this issue, ensure that the button is removed from the tab order when it is not visible. You can do this by adding the 'tabindex=-1' attribute to the button element when it is hidden, or by using JavaScript to remove the button from the DOM when it is not visible.
High
Scrollable region must have keyboard access
ComponentRef FFWQZB
Scrollable region must have keyboard access
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
pre:nth-child(23) > .language-ruby.hljs[data-highlighted="yes"]Accessible nameclass Book < ApplicationRecord
has_neighbors :embedding
validates :title, presence: true
validates :url, presence: true
validates :description, presence: true
after_create_commit :enqueue_embedding_generation,
unless: -> { ActiveModel::Type::Boolean.new.cast(ENV["DISABLE_EMBEDDING_CALLBACKS"]) }
private
def enqueue_embedding_generation
GenerateEmbeddingJob.perform_later(id)
end
end
Markup
<code class="text-sm hljs language-ruby" data-highlighted="yes">
How to fixReview the affected element and correct the reported accessibility issue.
ComponentRef RXF0QM
Scrollable region must have keyboard access
Affected page
https://noplisu.com/blog/harnessing-aiElement
.language-jsonAccessible name[
{
"role": "system",
"content": "You are Fractal Agent… Working directory: /project …"
},
{
"role": "user",
"content": "list Python files in this directory"
},
{
"role": "assistant",
"content": null,
"tool_calls": [
{
"id": "call_abc123",
"type": "function",
"function": {
"name": "Glob",
"arguments": "{\"pattern\": \"/*.py\"}"
}
}
]
},
{
"role": "tool",
"tool_call_id": "call_abc123",
"content": "app/main.py\napp/agent.py\napp/config.py\n…"
},
{
"role": "assistant",
"content": "Here are the Python files under the working directory:\n- app/main.py\n- app/agent.py\n…"
}
]
Markup
<code class="text-sm hljs language-json" data-highlighted="yes">
How to fixTo fix this issue, add a tabindex attribute to the scrollable region to make it focusable via keyboard navigation. Ensure that the tabindex value is set to 0 or a positive integer to allow the element to receive keyboard focus.
ComponentRef 32F4IZ
Scrollable region must have keyboard access
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
.language-sqlAccessible nameALTER TABLE books ADD COLUMN embedding vector(1536);
CREATE INDEX index_books_on_embedding_hnsw
ON books
USING hnsw (embedding vector_cosine_ops);
Markup
<code class="text-sm hljs language-sql" data-highlighted="yes">
How to fixReview the affected element and correct the reported accessibility issue.
Medium
Content sits outside any landmark region
ComponentRef 47WGCH
Meaningful content is not contained in a landmark (header/nav/main/footer/aside), so assistive-technology users cannot reach it via landmark navigation.
Affected page
https://noplisu.com/Element
html > body > section:nth-of-type(1) > div:nth-of-type(4)Accessible nameHello, I'mGrzegorz Lisowski🚀Full-Stack Developer🕹️AR/VR SpecialistCrafting exceptional digital experiences since 2013Let's connect🚀View My Work📝Read Articles
Markup
<div class="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 mt-8 sm:mt-0"><div class="text-center"><div class="mb-8 animate-fade-in-up"><div class="relative inline-block"><div class="absolute inset-0 bg-gradient-primary dark:bg-gradient-primary-dark rounded-full animate-pulse-slow"></div><div class="relative bg-white dark:bg-gray-800 p-2 rounded-full shadow-hard"><img alt="Grzegorz Lisowski - Full Stack Developer" fetchpriority="high" width="200" height="200" decoding="async" data-nimg="1" class="rounded-full shadow-medium" style="color:transparent" src="glisowski.jpg"></div></div></div><…
How to fixTo make this content accessible, wrap it in a landmark element such as a header, nav, main, footer, or aside. This will allow assistive technology users to navigate to the content using landmark navigation. For example, you can wrap the content in a <main> element like this: <main>...content...</main>.
Affected pages
/ /blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsMedium
List markup is malformed
ComponentRef C9IH1H
A list contains elements other than the list items it should, breaking its structure.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
ol:nth-child(19)Accessible nameA Book row holds title, url, description, optional genres and category, and a nullable embedding vector(1536).
A Sidekiq job is the only writer of embeddings. Creating a book enqueues work; the HTTP request never calls OpenAI.
Search embeds the query once, then asks Postgres for nearest neighbors.
“Similar books” reuses the stored vector, so that endpoint does not hit OpenAI at all.
Markup
<ol class="list-decimal pl-6 my-4 space-y-1">
How to fixEnsure <ul>/<ol> contain only <li> (plus <script>/<template>) as direct children.
Affected pages
/blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsComponentRef C9IH20
A list contains elements other than the list items it should, breaking its structure.
Affected page
https://noplisu.com/blog/harnessing-aiElement
ul:nth-child(70)Accessible nameMax iterations (default 25) stop runaway loops when the model keeps grepping forever.
Verbose mode logs turns and tool names to stderr; otherwise a spinner shows “Thinking” / “Running Grep…”.
API failures (402 credits, 429 rate limits, connection errors) return a clear status instead of leaving a half-broken history in interactive mode—the failed user turn can be dropped so a retry does not duplicate context.
Markup
<ul class="list-disc pl-6 my-4 space-y-1">
How to fixEnsure <ul>/<ol> contain only <li> (plus <script>/<template>) as direct children.
Affected pages
/blog/harnessing-ai /blog/modernizing-rails-applicationsMedium
Touch targets are too small on mobile
ComponentRef NEFXEQ
Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.
Affected page
https://noplisu.com/Element
div:nth-of-type(3) > div > article:nth-of-type(1) > div > div > aAccessible nameRead More →
Markup
<a class="text-primary-600 dark:text-red-500 hover:text-primary-700 dark:hover:text-red-600 font-medium text-sm transition-colors duration-300" href="/blog/harnessing-ai">Read More →</a>
How to fixTo fix this issue, increase the size of the touch target to at least 24x24px. You can do this by adding padding or increasing the font size of the interactive element.
Affected pages
/ /blog/implementing-semantic-search-in-bookmanticMedium
Text has insufficient colour contrast
ComponentRef J8UZH9
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/harnessing-aiElement
.hover\:scale-105.hover\:text-primary-600.dark\:hover\:text-red-500:nth-child(3)Accessible nameBlog
Markup
<a class="font-medium transition-all duration-300 hover:scale-105 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-red-500" href="/#blog">Blog</a>
How to fixTo improve accessibility, consider increasing the contrast between the text color and background color. This can be achieved by adjusting the CSS styles for the affected elements. For example, you can modify the `text-gray-700` and `dark:text-gray-300` classes to use colors with higher contrast ratios. Additionally, ensure that the hover and focus states also meet the minimum contrast requirements.
Affected pages
/ /blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsComponentRef 4586NS
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/modernizing-rails-applicationsElement
.hover\:-translate-y-0\.5Accessible nameGet In Touch
Markup
<a class="bg-gradient-primary dark:bg-gradient-primary-dark text-white px-6 py-2 rounded-full font-medium shadow-soft dark:shadow-glow-red hover:shadow-glow dark:hover:shadow-glow-red-dark transform hover:-translate-y-0.5 transition-all duration-300" href="/#contact-form">Get In Touch</a>
How to fixTo improve the accessibility of the 'Get In Touch' link, consider adjusting the text color to provide a higher contrast ratio with the background color. Aim for a contrast ratio of at least 4.5:1 for normal text.
Affected pages
/ /blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsComponentRef 2Q8CKM
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
a[href$="bookmantic.com"]Accessible name🌐Live Demo
Markup
<a href="https://bookmantic.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center px-3 py-2 bg-primary-600 dark:bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 dark:hover:bg-red-700 transition-colors duration-300">
How to fixTo improve accessibility, consider adjusting the color scheme to meet the minimum contrast ratio thresholds. You can use online tools to calculate the contrast ratio between the text and background colors. For this specific element, try changing the background color to a darker or lighter shade, or adjust the text color to improve legibility.
ComponentRef FVR88K
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
article:nth-child(2) > .pb-6.px-6 > .pt-4.border-t.justify-between > .hover\:text-primary-700.dark\:hover\:text-red-600.dark\:text-red-500Accessible nameRead More →
Markup
<a class="text-primary-600 dark:text-red-500 hover:text-primary-700 dark:hover:text-red-600 font-medium text-sm transition-colors duration-300" href="/blog/implementing-semantic-search-in-bookmantic">Read More →</a>
How to fixTo improve accessibility, adjust the color scheme to meet the minimum contrast ratio of 4.5:1 for normal text and 7:1 for larger text (18pt or 14pt bold). Consider using a color contrast analyzer tool to find suitable colors.
ComponentRef CC7BWC
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
.hover\:text-primary-700.dark\:hover\:text-red-600[href$="harnessing-ai"]Accessible nameRead More →
Markup
<a class="text-primary-600 dark:text-red-500 hover:text-primary-700 dark:hover:text-red-600 font-medium text-sm transition-colors duration-300" href="/blog/harnessing-ai">Read More →</a>
How to fixTo improve readability, consider adjusting the color scheme to meet the minimum contrast ratio thresholds. For the provided element, ensure the text color and background color combination has a contrast ratio of at least 4.5:1 for normal text. You can use online tools to calculate the contrast ratio and select accessible colors.
ComponentRef TKLH9J
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
.dark\:bg-white.dark\:text-gray-800[href$="#contact-form"]Accessible name🚀Start Your Project
Markup
<a href="#contact-form" class="inline-flex items-center px-8 py-3 bg-white dark:bg-white text-primary-600 dark:text-gray-800 font-semibold rounded-full shadow-soft dark:shadow-hard hover:shadow-glow dark:hover:shadow-glow-red transform hover:-translate-y-1 transition-all duration-300">
How to fixTo improve text legibility, consider increasing the contrast between the text color and background color. You can achieve this by changing the text color to a darker or lighter shade, or by modifying the background color to better complement the text. Ensure the contrast ratio meets the minimum requirements of WCAG 2.1 SC 1.4.3.
ComponentRef WQDDH1
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
.block[rel="noopener noreferrer"][target="_blank"]:nth-child(1) > .h-full.flex-col.flex > .space-x-4.mb-4.items-center > .min-w-0.flex-1 > .mt-1 > .text-primary-500.dark\:text-red-400.text-xsAccessible nameView Certificate →
Markup
<span class="text-xs text-primary-500 dark:text-red-400 font-medium">View Certificate →</span>
How to fixTo fix this issue, adjust the colors of the text and background to meet the minimum contrast ratio of 4.5:1 for normal text. You can use online tools to calculate the contrast ratio and select accessible colors. For the given HTML element <span class="text-xs text-primary-500 dark:text-red-400 font-medium">View Certificate →</span>, consider changing the text color or background color to improve legibility.
ComponentRef WDJ3E6
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
#projects > .max-w-7xl.sm\:px-6.lg\:px-8 > .mb-12 > .mb-6.gap-3.flex-wrap > .shadow-lg.bg-primary-600.dark\:bg-red-600Accessible nameAll Projects (10)
Markup
<button class="px-6 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105 bg-primary-600 dark:bg-red-600 text-white shadow-lg">All Projects<!-- --> (<!-- -->10<!-- -->)</button>
How to fixTo improve the legibility of this text, consider increasing the contrast between the text color and the background color. You can achieve this by adjusting the CSS styles for the button element, specifically the 'bg-primary-600' and 'text-white' classes. Ensure that the contrast ratio meets the minimum requirements of WCAG 2.1 SC 1.4.3.
ComponentRef HCYA57
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
#projects > .max-w-7xl.sm\:px-6.lg\:px-8 > .mt-16.text-center.animate-fade-in-up > .p-8.dark\:shadow-glow-red.rounded-2xl > .sm\:flex-row.gap-4.justify-center > .dark\:bg-white.dark\:text-gray-800[href$="noplisu"]Accessible name📁View GitHub
Markup
<a href="https://github.com/n..." target="_blank" rel="noopener noreferrer" class="inline-flex items-ce...">
How to fixTo improve accessibility, adjust the text color or background color to meet the minimum contrast ratio of 4.5:1 for normal text or 7:1 for larger text (18pt or 14pt bold). Consider using a color contrast analyzer tool to find suitable color combinations.
ComponentRef J6U9KE
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
#skills > .max-w-7xl.sm\:px-6.lg\:px-8 > .mb-12 > .gap-3.flex-wrap.justify-center > .shadow-lg.bg-primary-600.dark\:bg-red-600Accessible nameCertificates
Markup
<button class="px-6 py-3 rounded-full font-semibold transition-all duration-300 transform hover:scale-105 bg-primary-600 dark:bg-red-600 text-white shadow-lg">Certificates</button>
How to fixTo improve the accessibility of the Certificates button, consider increasing the contrast between the text color and the background color. This can be achieved by changing the background color to a darker or lighter shade, or by changing the text color to a color with higher contrast. For example, you could change the background color to #333 or the text color to #FFF.
ComponentRef 3YRPX6
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
.underline[target="_blank"][rel="noopener noreferrer"]:nth-child(3)Accessible nameneighbor
Markup
<a href="https://github.com/ankane/neighbor" class="text-primary-600 dark:text-red-500 hover:text-primary-700 dark:hover:text-red-600 underline" target="_blank" rel="noopener noreferrer">neighbor</a>
How to fixTo improve text legibility, ensure the color contrast between the text and background meets the minimum ratio of 4.5:1 for normal text. Consider adjusting the CSS classes 'text-primary-600', 'dark:text-red-500', 'hover:text-primary-700', and 'dark:hover:text-red-600' to achieve sufficient contrast.
ComponentRef CVG574
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/harnessing-aiElement
.leading-relaxed.mb-4:nth-child(6) > .underline[target="_blank"][rel="noopener noreferrer"]Accessible nameFractal Engine
Markup
<a href="https://github.com/noplisu/fractal-engine" class="text-primary-600 dark:text-red-500 hover:text-primary-700 dark:hover:text-red-600 underline" target="_blank" rel="noopener noreferrer">Fractal Engine</a>
How to fixIncrease the contrast between the text color and background color to meet the minimum contrast ratio thresholds. Consider using a color contrast analyzer tool to determine the optimal colors. For the given element, try changing the class 'text-primary-600' to a class with higher contrast or adjust the CSS to override the color.
ComponentRef LHGA2M
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
.leading-relaxed.mb-4.text-gray-700:nth-child(7) > .underline[href$="bookmantic.com"][target="_blank"]Accessible nameBookmantic
Markup
<a href="https://bookmantic.com" class="text-primary-600 dark:text-red-500 hover:text-primary-700 dark:hover:text-red-600 underline" target="_blank" rel="noopener noreferrer">Bookmantic</a>
How to fixTo improve the accessibility of the affected link, consider adjusting the text color or background color to meet the minimum contrast ratio of 4.5:1 for normal text. You can use online color contrast analyzers to find suitable color combinations.
ComponentRef IN2K6S
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
h1Accessible nameBeyond Keywords: Implementing Semantic Search in Bookmantic
Markup
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold gradient-text mb-6 leading-tight">Beyond Keywords: Implementing Semantic Search in Bookmantic</h1>
How to fixTo improve the accessibility of the page, consider increasing the contrast between the text color and the background color. This can be achieved by adjusting the CSS styles for the element with class 'gradient-text' to ensure that the color contrast ratio meets the minimum threshold of 4.5:1 for normal text and 7:1 for headings.
Affected pages
/blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsComponentRef INH5PV
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
.lg\:text-2xlAccessible nameHow I built Bookmantic, a Rails 8 book discovery API that finds titles by intent using OpenAI embeddings, PostgreSQL pgvector, and a curated ~45k catalog from Open Library.
Markup
<p class="text-xl lg:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-4xl mx-auto leading-relaxed">How I built Bookmantic, a Rails 8 book discovery API that finds titles by intent using OpenAI embeddings, PostgreSQL pgvector, and a curated ~45k catalog from Open Library.</p>
How to fixIncrease the contrast between the text color and the background color to meet the minimum contrast ratio thresholds. Consider using a color contrast analyzer tool to determine the optimal colors. For example, change the text color to a darker or lighter shade, or adjust the background color to improve the contrast.
Affected pages
/blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsComponentRef CH88VS
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
.flex-1 > .leading-relaxed.mb-4.text-gray-700Accessible nameFull-Stack Developer & AR/VR Specialist with over a decade of experience building robust applications. Passionate about modernizing legacy systems and creating innovative solutions.
Markup
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Full-Stack Developer & AR/VR Specialist with over a decade of experience building robust applications. Passionate about modernizing legacy systems and creating innovative solutions.</p>
How to fixTo improve text legibility, consider increasing the contrast between the text color (currently #464f55 or #7e8887) and the background color. You can achieve this by adjusting the CSS class 'text-gray-700' or 'dark:text-gray-300' to use a color with higher contrast. A contrast ratio of at least 4.5:1 for normal text is recommended.
Affected pages
/blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsComponentRef JX8GLL
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/modernizing-rails-applicationsElement
.text-white.font-bold.text-smAccessible nameGL
Markup
<span class="text-white font-bold text-sm">GL</span>
How to fixTo improve the accessibility of this element, consider changing the background color or the text color to increase the contrast ratio to at least 4.5:1 for normal text. You can use online tools to help determine the contrast ratio and select accessible colors.
Affected pages
/blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsComponentRef IVB0U5
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
.flex-1 > h3Accessible nameGrzegorz Lisowski
Markup
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Grzegorz Lisowski</h3>
How to fixTo improve the accessibility of this element, consider increasing the contrast ratio between the text color and the background color. This can be achieved by changing the text color or background color to meet the minimum contrast ratio thresholds as defined in the WCAG 2.1 guidelines. For example, you can modify the CSS class 'text-gray-900' to a darker or lighter shade, or adjust the background color to provide sufficient contrast.
Affected pages
/blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsComponentRef 8YLYE1
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/modernizing-rails-applicationsElement
.space-x-2.flex.items-center > .font-mediumAccessible nameBy Grzegorz Lisowski
Markup
<span class="font-medium">By <!-- -->Grzegorz Lisowski</span>
How to fixTo fix this issue, increase the contrast between the text color and background color. This can be achieved by changing the text color to a darker or lighter shade, or by adding a background color with sufficient contrast to the text. For example, you can change the CSS to use a higher contrast color for the text or background.
Affected pages
/blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsComponentRef 7AZ7MS
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/harnessing-aiElement
.text-lgAccessible nameGrzegorz Lisowski
Markup
<span class="font-bold text-lg sm:text-xl transition-colors duration-300 text-gray-800 dark:text-gray-200">Grzegorz Lisowski</span>
How to fixTo improve the accessibility of this element, consider increasing the contrast between the text color and the background color. This can be achieved by using a darker or lighter shade for the text, or by adding a background image or color that provides sufficient contrast. For example, you could change the text color to a darker gray or black, or add a background color that is a lighter gray or white.
Affected pages
/blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsComponentRef 8YLYE0
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
.space-x-1.flex.items-center:nth-child(2) > spanAccessible nameAugust 17, 2026
Markup
<span>August 17, 2026</span>
How to fixTo improve readability, adjust the text color or background color to achieve a minimum contrast ratio of 4.5:1 for normal text. Consider using a color contrast analyzer tool to find a suitable color combination.
Affected pages
/blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsComponentRef U9MBO8
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/modernizing-rails-applicationsElement
.text-white.text-2xl.font-boldAccessible nameGL
Markup
<span class="text-white font-bold text-2xl">GL</span>
How to fixTo improve the accessibility of this element, consider changing the background color or the text color to increase the contrast ratio to at least 4.5:1 for normal text. You can use a color contrast analyzer tool to find a suitable color combination.
Affected pages
/blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsComponentRef C1U8QT
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
.px-8Accessible nameBack to All Articles
Markup
<a class="inline-flex items-center px-8 py-4 bg-gradient-primary dark:bg-gradient-primary-dark text-white font-semibold rounded-full shadow-soft dark:shadow-glow-red hover:shadow-glow dark:hover:shadow-glow-red-dark transform hover:-translate-y-1 transition-all duration-300" href="/#blog">
How to fixIncrease the contrast between the text color and the background color of the 'Back to All Articles' link to meet the minimum contrast ratio thresholds. Consider using a color picker tool to select a background color that provides sufficient contrast with the text color.
Affected pages
/blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsComponentRef 7K5PBK
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/harnessing-aiElement
.hover\:scale-105.hover\:text-primary-600[href$="/#projects"]Accessible nameProjects
Markup
<a class="font-medium transition-all duration-300 hover:scale-105 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-red-500" href="/#projects">Projects</a>
How to fixTo improve accessibility, consider increasing the contrast between the text color and background color. This can be achieved by adjusting the CSS styles for the affected elements. For example, you can modify the `text-gray-700` and `dark:text-gray-300` classes to use colors with higher contrast ratios. Additionally, ensure that the hover and focus states also meet the minimum contrast requirements.
Affected pages
/blog/implementing-semantic-search-in-bookmantic /blog/harnessing-ai /blog/modernizing-rails-applicationsComponentRef CD9M7W
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
.hljs-literal:nth-child(13)Accessible nametrue
Markup
<span class="hljs-literal">true</span>
How to fixTo fix this issue, adjust the text and background colors to meet the minimum contrast ratio of 4.5:1 for normal text and 7:1 for larger text (18pt or 14pt bold). Consider using a color contrast analyzer tool to find suitable color combinations.
Affected pages
/blog/implementing-semantic-search-in-bookmantic /blog/harnessing-aiComponentRef D9575A
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/harnessing-aiElement
a[href$="openrouter.ai/"]Accessible nameOpenRouter
Markup
<a href="https://openrouter.ai/" class="text-primary-600 dark:text-red-500 hover:text-primary-700 dark:hover:text-red-600 underline" target="_blank" rel="noopener noreferrer">OpenRouter</a>
How to fixTo improve the accessibility of this link, consider increasing the contrast between the text color and the background color. This can be achieved by using a darker or lighter shade for the text or background, or by adding a background image or gradient that provides sufficient contrast. Ensure that the contrast ratio meets the minimum requirements of WCAG 2.1 SC 1.4.3.
ComponentRef ROX8Z9
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
.disabled\:opacity-50Accessible name🚀Send Message
Markup
<button type="submit" class="px-8 py-4 bg-gradien...">
How to fixIncrease the contrast between the text color and background color of the button to meet the minimum contrast ratio threshold of 4.5:1 for normal text.
ComponentRef WUBS4Z
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
.sm\:text-xlAccessible nameGrzegorz Lisowski
Markup
<span class="font-bold text-lg sm:text-xl transition-colors duration-300 text-gray-800 dark:text-gray-200">Grzegorz Lisowski</span>
How to fixTo improve readability, consider adjusting the color scheme to increase the contrast between the text and background colors. A minimum contrast ratio of 4.5:1 for normal text is recommended. You can use online tools to calculate the contrast ratio and select colors that meet the accessibility standards.
ComponentRef SWDURA
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
#projects > .max-w-7xl.sm\:px-6.lg\:px-8 > .mb-16.text-center.animate-fade-in-up > .max-w-3xl.mx-auto.text-xlAccessible nameA showcase of my work spanning full-stack development, AR/VR experiences, and open source contributions
Markup
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">A showcase of my work spanning full-stack development, AR/VR experiences, and open source contributions</p>
How to fixIncrease the contrast between the text color and background color to meet the minimum contrast ratio thresholds. Consider using a color contrast analyzer tool to determine the optimal colors. For example, change the text color to a darker or lighter shade, or add a background image or color with sufficient contrast.
ComponentRef 1N1IL5
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
.opacity-100 > .space-y-8 > .space-y-6 > .border-b-2.border-primary-200.dark\:border-red-800Accessible nameProfessional Certifications
Markup
<h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 border-b-2 border-primary-200 dark:border-red-800 pb-2">Professional Certifications</h3>
How to fixTo improve text legibility, consider increasing the contrast between the text color and the background color. You can achieve this by using a color with a higher contrast ratio, such as a darker or lighter shade, or by adding a background image or texture that provides sufficient contrast.
ComponentRef RBKW85
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
.rounded-2xl.overflow-hidden.hover\:shadow-medium:nth-child(1) > .h-48.dark\:from-gray-700.to-gray-100 > .top-4.right-4.absolute > .dark\:shadow-glow-red.px-3.bg-gradient-primaryAccessible nameFeatured
Markup
<span class="bg-gradient-primary dark:bg-gradient-primary-dark text-white px-3 py-1 rounded-full text-sm font-semibold shadow-soft dark:shadow-glow-red">Featured</span>
How to fixTo improve the accessibility of the 'Featured' text, consider increasing the contrast between the text color and the background color. This can be achieved by adjusting the CSS styles for the .bg-gradient-primary and text-white classes to meet the minimum contrast ratio thresholds as defined by the WCAG 2.1 guidelines.
ComponentRef O5UFFX
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
.mb-6.dark\:text-gray-400.text-lgAccessible nameLet's connect
Markup
<p class="text-gray-600 dark:text-gray-400 mb-6 text-lg font-medium">Let's connect</p>
How to fixTo improve accessibility, consider increasing the contrast between the text color and background color. You can achieve this by adjusting the CSS class 'text-gray-600' and 'dark:text-gray-400' to use a color combination with a higher contrast ratio. A ratio of at least 4.5:1 for normal text is recommended.
ComponentRef VDUR13
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
article:nth-child(2) > .block > .h-48.dark\:from-gray-700.to-gray-100 > .top-4.right-4.absolute > .dark\:shadow-glow-red.px-3.bg-gradient-primaryAccessible nameFeatured
Markup
<span class="bg-gradient-primary dark:bg-gradient-primary-dark text-white px-3 py-1 rounded-full text-sm font-semibold shadow-soft dark:shadow-glow-red">Featured</span>
How to fixTo improve the accessibility of the 'Featured' text, consider increasing the contrast between the text color and the background color. This can be achieved by adjusting the CSS styles for the .bg-gradient-primary and text-white classes to meet the minimum contrast ratio thresholds as defined by the WCAG 2.1 guidelines.
ComponentRef LZLXRV
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
h1Accessible nameGrzegorz Lisowski
Markup
<h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold gradient-text mb-4 leading-tight">Grzegorz Lisowski</h1>
How to fixTo improve the accessibility of the webpage, consider increasing the contrast between the text color and background color of the heading element. This can be achieved by adjusting the CSS styles for the .gradient-text class to use a more readable color combination.
ComponentRef COC6UI
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
.mb-2.dark\:text-gray-400.text-lgAccessible nameHello, I'm
Markup
<p class="text-lg text-gray-600 dark:text-gray-400 mb-2 font-medium">Hello, I'm</p>
How to fixTo improve readability, increase the contrast between the text color and the background color. Consider using a color contrast analyzer tool to find a suitable combination that meets the WCAG 2.1 guidelines for minimum contrast ratio.
ComponentRef J9GLI2
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
.block[href$="harnessing-ai"] > .h-48.dark\:from-gray-700.to-gray-100 > .top-4.right-4.absolute > .dark\:shadow-glow-red.px-3.bg-gradient-primaryAccessible nameFeatured
Markup
<span class="bg-gradient-primary dark:bg-gradient-primary-dark text-white px-3 py-1 rounded-full text-sm font-semibold shadow-soft dark:shadow-glow-red">Featured</span>
How to fixTo improve the accessibility of the 'Featured' text, consider increasing the contrast between the text color and the background color. This can be achieved by adjusting the CSS styles for the .bg-gradient-primary and text-white classes to meet the minimum contrast ratio thresholds as defined by the WCAG 2.1 guidelines.
ComponentRef H7H8VX
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
#projects > .max-w-7xl.sm\:px-6.lg\:px-8 > .mt-16.text-center.animate-fade-in-up > .p-8.dark\:shadow-glow-red.rounded-2xl > .text-2xlAccessible nameInterested in My Work?
Markup
<h3 class="text-2xl font-bold mb-4">Interested in My Work?</h3>
How to fixIncrease the contrast between the text color and background color of the element with the class 'text-2xl font-bold mb-4' to meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3.
ComponentRef XH6IXI
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
.sm\:text-3xl > .inline-flex.gap-2Accessible name🚀Full-Stack Developer
Markup
<span class="inline-flex items-center gap-2"><span class="text-3xl">🚀</span>Full-Stack Developer</span>
How to fixIncrease the contrast between the text color and the background color to meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3. Consider using a color contrast analyzer tool to determine the optimal colors.
ComponentRef E28HBH
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
.border-primary-600Accessible name📝Read Articles
Markup
<a href="#blog" class="inline-flex items-center px-8 py-4 border-2 border-primary-600 dark:border-red-500 text-primary-600 dark:text-red-500 font-semibold rounded-full hover:bg-primary-600 dark:hover:bg-red-600 hover:text-white transform hover:-translate-y-1 transition-all duration-300">
How to fixTo improve the accessibility of this element, consider increasing the contrast between the text color and the background color. You can do this by changing the CSS styles for the '.inline-flex' class, specifically the 'text-primary-600' and 'dark:text-red-500' classes, to use colors with a higher contrast ratio. A contrast ratio of at least 4.5:1 is recommended for normal text.
ComponentRef KU2V08
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
.max-w-2xlAccessible nameCrafting exceptional digital experiences since 2013
Markup
<p class="text-lg text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">Crafting exceptional digital experiences since 2013</p>
How to fixTo fix this issue, consider increasing the contrast between the text color and the background color. You can do this by changing the CSS class 'text-gray-500' to a darker or lighter shade, or by adding a background color that provides sufficient contrast with the text color.
ComponentRef B15OZ2
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
.shadow-glowAccessible name🚀View My Work
Markup
<a href="#projects" class="inline-flex items-center px-8 py-4 bg-gradient-primary dark:bg-gradient-primary-dark text-white font-semibold rounded-full shadow-glow dark:shadow-glow-red hover:shadow-hard transform hover:-translate-y-1 transition-all duration-300">
How to fixTo improve accessibility, consider adjusting the color scheme to meet the minimum contrast ratio of 4.5:1 for normal text. This can be achieved by changing the background color, text color, or both, to create sufficient contrast.
ComponentRef 2XZT2X
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
#projects > .max-w-7xl.sm\:px-6.lg\:px-8 > .mb-16.text-center.animate-fade-in-up > .text-4xl.sm\:text-5xlAccessible nameFeatured Projects
Markup
<h2 class="text-4xl sm:text-5xl font-bold gradient-text mb-4">Featured Projects</h2>
How to fixTo improve text legibility, adjust the colors used for the text and background to meet the minimum contrast ratio thresholds as per WCAG 2.1 SC 1.4.3. Consider using a color contrast analyzer tool to find suitable color combinations.
ComponentRef ZM5OYK
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
#projects > .max-w-7xl.sm\:px-6.lg\:px-8 > .mt-16.text-center.animate-fade-in-up > .p-8.dark\:shadow-glow-red.rounded-2xl > .sm\:flex-row.gap-4.justify-center > .border-white.dark\:border-white.dark\:text-whiteAccessible name💬Start a Project
Markup
<a href="#contact-form" class="inline-flex items-center px-8 py-3 border-2 border-white dark:border-white text-white dark:text-white font-semibold rounded-full hover:bg-white dark:hover:bg-white hover:text-primary-600 dark:hover:text-gray-800 transition-all duration-300">
How to fixIncrease the contrast between the text color and background color of the element to meet the minimum contrast ratio thresholds. Consider using a color picker tool or a contrast analyzer to find a suitable color combination.
ComponentRef NAZXNL
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
article:nth-child(1) > .pb-6.px-6 > .pt-4.border-t.justify-between > .space-x-2.items-center.flex > .w-8.h-8.bg-gradient-primary > .text-white.font-bold.text-smAccessible nameGL
Markup
<span class="text-white font-bold text-sm">GL</span>
How to fixTo improve the accessibility of this element, consider changing the background color or the text color to increase the contrast ratio. A contrast ratio of at least 4.5:1 for normal text is recommended. You can use online tools to check the contrast ratio and find suitable color combinations.
ComponentRef YLA55E
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
.mb-12.text-center > .text-4xl.sm\:text-5xlAccessible nameLet's Build Something Amazing
Markup
<h2 class="text-4xl sm:text-5xl font-bold gradient-text mb-4">Let's Build Something Amazing</h2>
How to fixTo improve the accessibility of the page, increase the contrast between the text color and the background color of the element with the class 'gradient-text'. This can be achieved by using a color with a higher contrast ratio, or by adding a background color or outline to the text to make it more distinguishable.
ComponentRef UGH5Y5
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
.mb-12.text-center > .max-w-3xl.mx-auto.text-xlAccessible nameReady to bring your vision to life? I'm excited to discuss your project and explore how we can create something extraordinary together.
Markup
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">Ready to bring your vision to life? I'm excited to discuss your project and explore how we can create something extraordinary together.</p>
How to fixTo improve the accessibility of this text, consider increasing the contrast between the text color and the background color. This can be achieved by changing the CSS class 'text-gray-600' to a darker or more saturated color, or by adding a background color with sufficient contrast to the text.
ComponentRef 6CZC3P
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/Element
#projects > .max-w-7xl.sm\:px-6.lg\:px-8 > .mt-16.text-center.animate-fade-in-up > .p-8.dark\:shadow-glow-red.rounded-2xl > .opacity-90.mb-6.text-lgAccessible nameCheck out my GitHub for more projects and contributions, or let's discuss your next project
Markup
<p class="text-lg mb-6 opacity-90">Check out my GitHub for more projects and contributions, or let's discuss your next project</p>
How to fixTo fix this issue, adjust the color scheme to ensure the text and background colors have a sufficient contrast ratio, as recommended by the Web Content Accessibility Guidelines (WCAG 2.1). Consider using a color contrast analyzer tool to determine the optimal colors. For the given element, try changing the text color or background color to improve the contrast ratio.
ComponentRef 7TWTIE
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
pre:nth-child(23) > .language-ruby.hljs[data-highlighted="yes"] > .hljs-stringAccessible name"DISABLE_EMBEDDING_CALLBACKS"
Markup
<span class="hljs-string">"DISABLE_EMBEDDING_CALLBACKS"</span>
How to fixTo improve the accessibility of the text, consider increasing the contrast between the text color and the background color. This can be achieved by using a darker or lighter shade for the text or background, depending on the current colors used. Ensure that the contrast ratio meets the minimum requirements as outlined in WCAG 2.1 SC 1.4.3.
ComponentRef Y60LRG
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
.hljs-variable.constant_:nth-child(33)Accessible nameDIMENSIONS
Markup
<span class="hljs-variable constant_">DIMENSIONS</span>
How to fixIncrease the contrast between the text color and the background color to meet the minimum contrast ratio thresholds. This can be achieved by changing the text color, background color, or both. A contrast ratio of at least 4.5:1 for normal text is recommended.
ComponentRef KQNRAU
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
.inline-flex.mb-8[href$="/#blog"]Accessible nameBack to Blog
Markup
<a class="inline-flex items-center text-primary-600 dark:text-red-500 hover:text-primary-700 dark:hover:text-red-600 font-medium transition-colors duration-300 mb-8" href="/#blog">
How to fixIncrease the contrast between the text color and background color of the 'Back to Blog' link to meet the minimum contrast ratio thresholds. Consider using a color contrast analyzer tool to determine the optimal colors.
ComponentRef O3K7Z5
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/harnessing-aiElement
.inline-flex.mb-8.text-primary-600Accessible nameBack to Blog
Markup
<a class="inline-flex items-center text-primary-600 dark:text-red-500 hover:text-primary-700 dark:hover:text-red-600 font-medium transition-colors duration-300 mb-8" href="/#blog">
How to fixTo improve the accessibility of the 'Back to Blog' link, consider increasing the contrast between the text color and the background color. This can be achieved by adjusting the CSS classes 'text-primary-600' and 'dark:text-red-500' to meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3.
ComponentRef 2MTTTM
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
.language-sql > .hljs-numberAccessible name1536
Markup
<span class="hljs-number">1536</span>
How to fixTo improve the accessibility of this text, increase the contrast between the text color and the background color. This can be achieved by changing the text color or the background color to meet the minimum contrast ratio thresholds as specified in WCAG 2.1 SC 1.4.3.
ComponentRef 4RMQB2
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
.language-ruby.hljs[data-highlighted="yes"] > .hljs-keyword:nth-child(6)Accessible nameif
Markup
<span class="hljs-keyword">if</span>
How to fixTo improve the accessibility of the text, consider adjusting the color scheme to meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3. This can be achieved by changing either the text color or the background color to create sufficient contrast, making the content more legible for users.
ComponentRef HQZN9W
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
pre:nth-child(23) > .language-ruby.hljs[data-highlighted="yes"] > .hljs-variable.constant_Accessible nameENV
Markup
<span class="hljs-variable constant_">ENV</span>
How to fixTo improve the readability of the text, consider adjusting the colors used for the text and background to meet the minimum contrast ratio requirements. This can be achieved by using a color contrast analyzer tool to select colors that have sufficient contrast.
ComponentRef 6NZPKZ
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
.language-sqlAccessible nameALTER TABLE books ADD COLUMN embedding vector(1536);
CREATE INDEX index_books_on_embedding_hnsw
ON books
USING hnsw (embedding vector_cosine_ops);
Markup
<code class="text-sm hljs language-sql" data-highlighted="yes">
How to fixTo improve the accessibility of the code block, consider increasing the contrast between the text color and the background color. This can be achieved by changing the CSS class 'text-gray-100' to a darker color or by adding a background image with sufficient contrast. Ensure the new colors meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3.
ComponentRef 8VXLBL
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/modernizing-rails-applicationsElement
.text-primary-600Accessible nameBack to Blog
Markup
<a class="inline-flex items-center text-primary-600 dark:text-red-500 hover:text-primary-700 dark:hover:text-red-600 font-medium transition-colors duration-300 mb-8" href="/#blog">
How to fixTo improve the accessibility of the 'Back to Blog' link, consider increasing the contrast between the text color and the background color. This can be achieved by adjusting the CSS classes 'text-primary-600' and 'dark:text-red-500' to meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3.
ComponentRef U6HOTI
Text and background colours do not meet the minimum contrast ratio, reducing legibility.
Affected page
https://noplisu.com/blog/implementing-semantic-search-in-bookmanticElement
.class_.hljs-title:nth-child(16)Accessible nameActiveModel::Type::Boolean
Markup
<span class="hljs-title class_">ActiveModel::Type::Boolean</span>
How to fixIncrease the contrast between the text color and the background color of the element to meet the minimum contrast ratio thresholds as specified in WCAG 2.1 SC 1.4.3.
05 · Pages inspected
06 · About this assessment
Evolize inspects publicly accessible website pages using automated browser-based testing and deterministic accessibility rules. Automated testing can identify many reproducible technical issues but cannot determine complete WCAG or legal compliance.
- Publicly accessible surfaces only — no credentials, private systems, or source-code access.
- Findings apply to the pages and states successfully inspected; automated analysis may not detect every issue.
- Results reflect the site at the scan date and may have changed since.
Evolize provides digital risk intelligence and does not provide legal advice, certify compliance, or guarantee that litigation will not occur. Methodology · Security · Example assessment
07 · Continuous monitoring
This public report captures one assessment. Evolize monitoring rescans the website, detects new and recurring findings, tracks changes over time and verifies corrections.
Is information in this report inaccurate or outdated? Request a correction or removal.